"use client";

import { useState, useEffect, Suspense } from "react";
import { useRouter, useParams } from "next/navigation";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useGetTenderByIdQuery, useCreateTenderMutation, useUpdateTenderMutation } from "@/redux/apis/tender/tenderApi";
import { useGetTenderCategoriesQuery } from "@/redux/apis/tender/tenderCategoryApi";
import { useGetUsersQuery } from "@/redux/apis/adminApi";
import Layout from "@/app/components/Layout";
import { FileText, Upload, X } from "lucide-react";

const tenderSchema = yup.object().shape({
  amount: yup.number().nullable().transform((value, originalValue) => originalValue === "" ? null : value).typeError("Amount must be a number"),
  tenderCategoryId: yup.number().nullable().transform((value, originalValue) => originalValue === "" ? null : value).typeError("Category is required"),
  emdAmount: yup.number().nullable().transform((value, originalValue) => originalValue === "" ? null : value).typeError("EMD Amount must be a number"),
  docCharges: yup.number().nullable().transform((value, originalValue) => originalValue === "" ? null : value).typeError("Doc Charges must be a number"),
  tenderSupportFees: yup.number().nullable().transform((value, originalValue) => originalValue === "" ? null : value).typeError("Tender Support Fees must be a number"),
  tenderId: yup.string().nullable(),
  tscOnEtsPortal: yup.string().nullable(),
  tenderReferenceNumber: yup.string().nullable(),
  tenderTitle: yup.string().required("Tender Title is required"),
  publicationDate: yup.string().nullable(),
  bidSubmissionDate: yup.string().nullable(),
  tenderIdOnCppp: yup.string().nullable(),
  tenderType: yup.string().nullable(),
  tenderDescription: yup.string().nullable(),
  tenderFee: yup.number().nullable().transform((value, originalValue) => originalValue === "" ? null : value).typeError("Tender Fee must be a number"),
  bidProcessingFee: yup.number().nullable().transform((value, originalValue) => originalValue === "" ? null : value).typeError("Bid Processing Fee must be a number"),
  preBidMeetingDate: yup.string().nullable(),
  costOfRfs: yup.number().nullable().transform((value, originalValue) => originalValue === "" ? null : value).typeError("Cost of RFS must be a number"),
  bankDetails: yup.string().nullable(),
  pbg: yup.string().nullable(),
  bidSubmissionEndDateOnline: yup.string().nullable(),
  bidSubmissionEndDateOffline: yup.string().nullable(),
  bidOpenDate: yup.string().nullable(),
  city: yup.string().nullable(),
  pincode: yup.string().nullable(),
  state: yup.string().nullable(),
  isActive: yup.boolean().required().default(true),
  tenderOwnerId: yup.number().nullable().transform((value, originalValue) => originalValue === "" ? null : value).typeError("Tender Owner is required"),
});

const INDIAN_STATES = [
  "Andhra Pradesh", "Arunachal Pradesh", "Assam", "Bihar", "Chhattisgarh", "Goa", "Gujarat", "Haryana",
  "Himachal Pradesh", "Jharkhand", "Karnataka", "Kerala", "Madhya Pradesh", "Maharashtra", "Manipur",
  "Meghalaya", "Mizoram", "Nagaland", "Odisha", "Punjab", "Rajasthan", "Sikkim", "Tamil Nadu",
  "Telangana", "Tripura", "Uttar Pradesh", "Uttarakhand", "West Bengal", "Andaman and Nicobar Islands",
  "Chandigarh", "Dadra and Nagar Haveli and Daman and Diu", "Delhi", "Jammu and Kashmir", "Ladakh",
  "Lakshadweep", "Puducherry"
];


type TenderFormData = yup.InferType<typeof tenderSchema>;

interface ApiError {
  data?: {
    message?: string;
  };
  message?: string;
}

function EditTenderForm() {
  const router = useRouter();
  const params = useParams();
  const id = (params?.id as string) || "new";
  
  const [boqFile, setBoqFile] = useState<File | null>(null);
  const [tenderNoticeFile, setTenderNoticeFile] = useState<File | null>(null);
  const [otherFiles, setOtherFiles] = useState<File[]>([]);

  const { data: tenderData, isLoading: isFetching } = useGetTenderByIdQuery(id, {
    skip: id === "new",
  });


  const { data: categoriesData } = useGetTenderCategoriesQuery({ includeInactive: false });
  const { data: ownersData } = useGetUsersQuery({ role: "tender-owner", limit: 1000 });

  const [ownerSearch, setOwnerSearch] = useState("");
  const [showOwnerOptions, setShowOwnerOptions] = useState(false);

  const [createTender, { isLoading: isCreating }] = useCreateTenderMutation();
  const [updateTender, { isLoading: isUpdating }] = useUpdateTenderMutation();

  const loading = isCreating || isUpdating;

  const {
    register,
    handleSubmit,
    formState: { errors },
    setValue,
  } = useForm({
    resolver: yupResolver(tenderSchema),
    values: tenderData?.data ? {
      ...tenderData.data,
      publicationDate: tenderData.data.publicationDate ? tenderData.data.publicationDate.split('T')[0] : null,
      bidSubmissionDate: tenderData.data.bidSubmissionDate ? tenderData.data.bidSubmissionDate.split('T')[0] : null,
      preBidMeetingDate: tenderData.data.preBidMeetingDate ? tenderData.data.preBidMeetingDate.split('T')[0] : null,
      bidSubmissionEndDateOnline: tenderData.data.bidSubmissionEndDateOnline ? tenderData.data.bidSubmissionEndDateOnline.split('T')[0] : null,
      bidSubmissionEndDateOffline: tenderData.data.bidSubmissionEndDateOffline ? tenderData.data.bidSubmissionEndDateOffline.split('T')[0] : null,
      bidOpenDate: tenderData.data.bidOpenDate ? tenderData.data.bidOpenDate.split('T')[0] : null,
      state: tenderData.data.state || "",
      city: tenderData.data.city || "",
      pincode: tenderData.data.pincode || "",
      isActive: tenderData.data.isActive ?? true,
      tenderOwnerId: tenderData.data.tenderOwnerId || null,
      tenderCategoryId: tenderData.data.tenderCategoryId || null,
      // Ensure all fields from TenderFormData are present or default to null/undefined if necessary
      amount: tenderData.data.amount ?? null,
      emdAmount: tenderData.data.emdAmount ?? null,
      docCharges: tenderData.data.docCharges ?? null,
      tenderSupportFees: tenderData.data.tenderSupportFees ?? null,
      tenderId: tenderData.data.tenderId ?? null,
      tscOnEtsPortal: tenderData.data.tscOnEtsPortal ?? null,
      tenderReferenceNumber: tenderData.data.tenderReferenceNumber ?? null,
      tenderTitle: tenderData.data.tenderTitle ?? "",
      tenderIdOnCppp: tenderData.data.tenderIdOnCppp ?? null,
      tenderType: tenderData.data.tenderType ?? null,
      tenderDescription: tenderData.data.tenderDescription ?? null,
      tenderFee: tenderData.data.tenderFee ?? null,
      bidProcessingFee: tenderData.data.bidProcessingFee ?? null,
      costOfRfs: tenderData.data.costOfRfs ?? null,
      bankDetails: tenderData.data.bankDetails ?? null,
      pbg: tenderData.data.pbg ?? null
    } : undefined,
  });

  // Backup effect for category since it's a select box
  useEffect(() => {
    if (tenderData?.data?.tenderCategoryId) {
      setValue("tenderCategoryId", tenderData.data.tenderCategoryId);
    }
  }, [tenderData, setValue]);

  useEffect(() => {
    if (categoriesData?.data && tenderData?.data?.tenderCategoryId) {
      setValue("tenderCategoryId", tenderData.data.tenderCategoryId);
    }
  }, [categoriesData, tenderData, setValue]);

  useEffect(() => {
    if (ownersData?.data && tenderData?.data?.tenderOwnerId) {
      setValue("tenderOwnerId", tenderData.data.tenderOwnerId);
      const owner = ownersData.data.find(o => o.id === tenderData.data.tenderOwnerId);
      if (owner && owner.name !== ownerSearch) {
        // eslint-disable-next-line
        setOwnerSearch(owner.name);
      }
    }
  }, [ownersData, tenderData, setValue, ownerSearch]);

  const onSubmit = async (data: TenderFormData) => {
    try {
      const formData = new FormData();

      // Append all form fields
      Object.entries(data).forEach(([key, value]) => {
        if (value !== null && value !== undefined && value !== "") {
          formData.append(key, value.toString());
        }
      });

      // Append files
      if (boqFile) {
        formData.append("boqDocument", boqFile);
      }
      if (tenderNoticeFile) {
        formData.append("tenderNoticeDocument", tenderNoticeFile);
      }
      if (otherFiles.length > 0) {
        otherFiles.forEach((file) => {
          formData.append("otherDocuments", file);
        });
      }

      if (id && id !== "new") {
        await updateTender({ id, formData }).unwrap();
        alert("Tender updated successfully!");
      } else {
        await createTender(formData).unwrap();
        alert("Tender created successfully!");
      }
      router.push("/tenders");
    } catch (err: unknown) {
      const error = err as ApiError;
      console.error("Error saving tender:", error);
      alert(error?.data?.message || "Failed to save tender");
    }
  };

  console.log("Tender Edit Page Rendered", { id, hasData: !!tenderData?.data });

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>, type: 'boq' | 'notice' | 'other') => {
    const files = e.target.files;
    if (!files) return;

    if (type === 'boq') {
      setBoqFile(files[0]);
    } else if (type === 'notice') {
      setTenderNoticeFile(files[0]);
    } else if (type === 'other') {
      setOtherFiles(Array.from(files));
    }
  };

  const removeFile = (type: 'boq' | 'notice' | 'other', index?: number) => {
    if (type === 'boq') {
      setBoqFile(null);
    } else if (type === 'notice') {
      setTenderNoticeFile(null);
    } else if (type === 'other' && index !== undefined) {
      setOtherFiles(prev => prev.filter((_, i) => i !== index));
    }
  };

  if (isFetching) {
    return (
      <Layout>
        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
          <div className="text-center">
            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            <p className="mt-2 text-gray-600">Loading tender...</p>
          </div>
        </div>
      </Layout>
    );
  }

  return (
    <Layout>
      <div className="p-6">
        <div className="max-w-4xl mx-auto">
          <div className="mb-6">
            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">
              {id === "new" ? "Add New Tender" : "Edit Tender"}
            </h1>
          </div>

          <form
            key={tenderData?.data?.id ? `edit-${tenderData.data.id}` : 'new'}
            onSubmit={handleSubmit(onSubmit)}
            className="bg-white rounded-lg shadow-sm p-6 space-y-6"
          >

            {/* Basic Information */}
            <div className="border-b border-gray-200 pb-4">
              <h2 className="text-xl font-semibold text-gray-900 mb-4">Basic Information</h2>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="relative">
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Tender Owner <span className="text-red-500">*</span>
                  </label>
                  <div className="relative">
                    <input
                      type="text"
                      placeholder="Search and select owner..."
                      value={ownerSearch}
                      onChange={(e) => {
                        setOwnerSearch(e.target.value);
                        setShowOwnerOptions(true);
                      }}
                      onFocus={() => setShowOwnerOptions(true)}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                    />
                    <input type="hidden" {...register("tenderOwnerId")} />

                    {showOwnerOptions && (
                      <div className="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-60 overflow-y-auto">
                        {ownersData?.data
                          ?.filter(owner =>
                            owner.name.toLowerCase().includes(ownerSearch.toLowerCase()) ||
                            owner.email.toLowerCase().includes(ownerSearch.toLowerCase())
                          )
                          .map((owner) => (
                            <div
                              key={owner.id}
                              className="px-4 py-2 hover:bg-blue-50 cursor-pointer transition-colors border-b border-gray-50 last:border-0"
                              onClick={() => {
                                setValue("tenderOwnerId", owner.id);
                                setOwnerSearch(owner.name);
                                setShowOwnerOptions(false);
                              }}
                            >
                              <div className="text-sm font-medium text-gray-900">{owner.name}</div>
                              <div className="text-xs text-gray-500">{owner.email}</div>
                            </div>
                          ))}
                      </div>
                    )}
                  </div>
                  {errors.tenderOwnerId && (
                    <p className="mt-1 text-sm text-red-600">{errors.tenderOwnerId.message}</p>
                  )}
                  {showOwnerOptions && (
                    <div
                      className="fixed inset-0 z-40"
                      onClick={() => setShowOwnerOptions(false)}
                    />
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Tender Title <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    {...register("tenderTitle")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                  {errors.tenderTitle && (
                    <p className="mt-1 text-sm text-red-600">{errors.tenderTitle.message}</p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Category Name
                  </label>
                  <select
                    {...register("tenderCategoryId")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 bg-white"
                  >
                    <option value="">Select Category</option>
                    {categoriesData?.data?.map((cat) => (
                      <option key={cat.id} value={cat.id}>
                        {cat.name}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Tender ID</label>
                  <input
                    type="text"
                    {...register("tenderId")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Tender Reference Number</label>
                  <input
                    type="text"
                    {...register("tenderReferenceNumber")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">TSC on ETS Portal</label>
                  <input
                    type="text"
                    {...register("tscOnEtsPortal")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Tender ID on CPPP</label>
                  <input
                    type="text"
                    {...register("tenderIdOnCppp")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Tender Type</label>
                  <input
                    type="text"
                    {...register("tenderType")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">State Name</label>
                  {tenderData?.data?.state && (
                    <div className="mb-2 p-2 bg-blue-50 border border-blue-200 rounded text-sm">
                      <strong>Saved State:</strong> <span className="text-blue-700">{tenderData.data.state}</span>
                    </div>
                  )}
                  <input
                    type="text"
                    {...register("state")}
                    defaultValue={tenderData?.data?.state || ""}
                    list="states-list"
                    autoComplete="off"
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                    placeholder="Enter state"
                  />
                  <datalist id="states-list">
                    {INDIAN_STATES.map((state) => (
                      <option key={state} value={state} />
                    ))}
                  </datalist>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">City</label>
                  <input
                    type="text"
                    {...register("city")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                    placeholder="Enter city"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Pincode</label>
                  <input
                    type="text"
                    {...register("pincode")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>
              </div>

              <div className="mt-4">
                <label className="block text-sm font-medium text-gray-700 mb-1">Tender Description</label>
                <textarea
                  {...register("tenderDescription")}
                  rows={4}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                />
              </div>
            </div>

            {/* Financial Information */}
            <div className="border-b border-gray-200 pb-4">
              <h2 className="text-xl font-semibold text-gray-900 mb-4">Financial Information</h2>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Amount</label>
                  <input
                    type="number"
                    step="0.01"
                    {...register("amount")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                  {errors.amount && (
                    <p className="mt-1 text-sm text-red-600">{errors.amount.message}</p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">EMD Amount</label>
                  <input
                    type="number"
                    step="0.01"
                    {...register("emdAmount")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Doc Charges</label>
                  <input
                    type="number"
                    step="0.01"
                    {...register("docCharges")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Tender Support Fees</label>
                  <input
                    type="number"
                    step="0.01"
                    {...register("tenderSupportFees")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Tender Fee</label>
                  <input
                    type="number"
                    step="0.01"
                    {...register("tenderFee")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Bid Processing Fee</label>
                  <input
                    type="number"
                    step="0.01"
                    {...register("bidProcessingFee")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Cost of RFS</label>
                  <input
                    type="number"
                    step="0.01"
                    {...register("costOfRfs")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>
              </div>
            </div>

            {/* Dates */}
            <div className="border-b border-gray-200 pb-4">
              <h2 className="text-xl font-semibold text-gray-900 mb-4">Important Dates</h2>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Publication Date</label>
                  <input
                    type="date"
                    {...register("publicationDate")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Bid Submission Date</label>
                  <input
                    type="date"
                    {...register("bidSubmissionDate")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Pre-Bid Meeting Date</label>
                  <input
                    type="date"
                    {...register("preBidMeetingDate")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Bid Submission End Date (Online)</label>
                  <input
                    type="date"
                    {...register("bidSubmissionEndDateOnline")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Bid Submission End Date (Offline)</label>
                  <input
                    type="date"
                    {...register("bidSubmissionEndDateOffline")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Bid Open Date</label>
                  <input
                    type="date"
                    {...register("bidOpenDate")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>
              </div>
            </div>

            {/* Documents Upload */}
            <div className="border-b border-gray-200 pb-4">
              <h2 className="text-xl font-semibold text-gray-900 mb-4">Documents</h2>

              <div className="space-y-4">
                {/* BOQ Document */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    BOQ Document (PDF)
                  </label>
                  <div className="flex items-center gap-2">
                    <label className="flex-1 flex items-center justify-center px-4 py-2 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-blue-500 transition-colors">
                      <Upload className="w-5 h-5 mr-2 text-gray-400" />
                      <span className="text-sm text-gray-600">
                        {boqFile ? boqFile.name : "Choose BOQ PDF"}
                      </span>
                      <input
                        type="file"
                        accept=".pdf"
                        onChange={(e) => handleFileChange(e, 'boq')}
                        className="hidden"
                      />
                    </label>
                    {boqFile && (
                      <button
                        type="button"
                        onClick={() => removeFile('boq')}
                        className="p-2 text-red-600 hover:bg-red-50 rounded-lg"
                      >
                        <X className="w-5 h-5" />
                      </button>
                    )}
                  </div>
                  {tenderData?.data?.boqDocument && !boqFile && (
                    <p className="mt-1 text-sm text-green-600 flex items-center gap-1">
                      <FileText className="w-4 h-4" />
                      Current: {tenderData.data.boqDocument.split('/').pop()}
                    </p>
                  )}
                </div>

                {/* Tender Notice Document */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Tender Notice Document (PDF)
                  </label>
                  <div className="flex items-center gap-2">
                    <label className="flex-1 flex items-center justify-center px-4 py-2 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-blue-500 transition-colors">
                      <Upload className="w-5 h-5 mr-2 text-gray-400" />
                      <span className="text-sm text-gray-600">
                        {tenderNoticeFile ? tenderNoticeFile.name : "Choose Tender Notice PDF"}
                      </span>
                      <input
                        type="file"
                        accept=".pdf"
                        onChange={(e) => handleFileChange(e, 'notice')}
                        className="hidden"
                      />
                    </label>
                    {tenderNoticeFile && (
                      <button
                        type="button"
                        onClick={() => removeFile('notice')}
                        className="p-2 text-red-600 hover:bg-red-50 rounded-lg"
                      >
                        <X className="w-5 h-5" />
                      </button>
                    )}
                  </div>
                  {tenderData?.data?.tenderNoticeDocument && !tenderNoticeFile && (
                    <p className="mt-1 text-sm text-green-600 flex items-center gap-1">
                      <FileText className="w-4 h-4" />
                      Current: {tenderData.data.tenderNoticeDocument.split('/').pop()}
                    </p>
                  )}
                </div>

                {/* Other Documents */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Other Documents (Multiple PDFs)
                  </label>
                  <label className="flex items-center justify-center px-4 py-2 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-blue-500 transition-colors">
                    <Upload className="w-5 h-5 mr-2 text-gray-400" />
                    <span className="text-sm text-gray-600">
                      {otherFiles.length > 0 ? `${otherFiles.length} file(s) selected` : "Choose Other PDFs"}
                    </span>
                    <input
                      type="file"
                      accept=".pdf"
                      multiple
                      onChange={(e) => handleFileChange(e, 'other')}
                      className="hidden"
                    />
                  </label>
                  {otherFiles.length > 0 && (
                    <div className="mt-2 space-y-1">
                      {otherFiles.map((file, index) => (
                        <div key={index} className="flex items-center justify-between px-3 py-2 bg-gray-50 rounded-lg">
                          <span className="text-sm text-gray-700 flex items-center gap-2">
                            <FileText className="w-4 h-4" />
                            {file.name}
                          </span>
                          <button
                            type="button"
                            onClick={() => removeFile('other', index)}
                            className="text-red-600 hover:text-red-800"
                          >
                            <X className="w-4 h-4" />
                          </button>
                        </div>
                      ))}
                    </div>
                  )}
                  {tenderData?.data?.otherDocuments && otherFiles.length === 0 && (
                    <p className="mt-1 text-sm text-green-600">
                      Current: {(() => {
                        try {
                          const docStr = tenderData.data.otherDocuments.trim();
                          if (docStr.startsWith('[') || docStr.startsWith('{')) {
                            return JSON.parse(docStr).length;
                          }
                          return 0;
                        } catch { return 0; }
                      })()} document(s) uploaded
                    </p>
                  )}
                </div>
              </div>
            </div>

            {/* Additional Information */}
            <div className="border-b border-gray-200 pb-4">
              <h2 className="text-xl font-semibold text-gray-900 mb-4">Additional Information</h2>

              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Bank Details</label>
                  <textarea
                    {...register("bankDetails")}
                    rows={3}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">PBG</label>
                  <input
                    type="text"
                    {...register("pbg")}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                  />
                </div>
              </div>
            </div>

            {/* Status */}
            <div className="flex items-center">
              <input
                type="checkbox"
                {...register("isActive")}
                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
              />
              <label className="ml-2 block text-sm text-gray-700">Active</label>
            </div>

            {/* Submit Button */}
            <div className="flex justify-end gap-4 pt-4">
              <button
                type="button"
                onClick={() => router.push("/tenders")}
                className="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={loading}
                className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
              >
                {loading && <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>}
                {loading ? "Saving..." : id === "new" ? "Create Tender" : "Update Tender"}
              </button>
            </div>
          </form>
        </div>
      </div>
    </Layout>
  );
}

export default function EditTenderClient() {
  return (
    <Suspense fallback={
      <Layout>
        <div className="p-6 flex items-center justify-center min-h-screen">
          <div className="text-center">
            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            <p className="mt-2 text-gray-600">Loading...</p>
          </div>
        </div>
      </Layout>
    }>
      <EditTenderForm />
    </Suspense>
  );
}