import { FileUploader } from "@/components/ui/FileUploader";
import SearchableSelect from "@/components/ui/SearchableSelect";
import { TextArea } from "@/components/ui/TextArea";
import { TextBox } from "@/components/ui/TextBox";
import OptionRow from "@/components/ui/OptionRow";
import DatePicker from "@/components/ui/DatePicker";
import PlacementDatePicker from "@/fields/PlacementDate";
import { Plus } from "lucide-react";
import { StructureFormField } from "@/hooks/useEquityStructureForm";
import { formatDateToString } from "@/lib/common";

interface EquityStructureFormFieldsProps {
  formData: {
    p_currency: { label: string; value: string } | null;
    durationUnit: { label: string; value: string } | null;
    bank: { label: string; value: string } | null;
    bankadviserefno: string;
    placementdate: string;
    couponpercentage: string;
    expirydate: string;
    observationdate: string;
    kobarrier: string;
    producttype: string;
    structureamount: string;
    nocallperiod: string;
    strikepercentage: string;
    startdate: string;
    ticker: string;
    securityname: string;
    effectivedate: string;
    amount: string;
    commission: string;
    chargesandfees: string;
    federalturnovertax: string;
    relationshipmanager: string;
    description: string;
    remarks: string;
  };
  amountDisplayValue: string;
  rows: number[];
  currencies: { value: string; label: string }[];
  errors: Record<string, string>;
  clearError: (field: string) => void;
  handleFieldBlur: (field: StructureFormField, validateField: (field: StructureFormField) => string | undefined) => void;
  validateField: (field: StructureFormField) => string | undefined;
  updateFormData: (updates: any) => void;
  formatDateToString: (date: Date) => string;
  setShowBankModal: (show: boolean) => void;
  setErrors: (errors: Record<string, string> | ((prev: Record<string, string>) => Record<string, string>)) => void;
  addRow: () => void;
  removeRow: (index: number) => void;
  setSelectedFile: (file: File | null) => void;
}

export const EquityStructureFormFields = ({
  formData,
  amountDisplayValue,
  rows,
  currencies,
  errors,
  clearError,
  handleFieldBlur,
  validateField,
  updateFormData,
  formatDateToString,
  setShowBankModal,
  setErrors,
  addRow,
  removeRow,
  setSelectedFile,
}: EquityStructureFormFieldsProps) => {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-4 gap-6">
      {/* Placement Date */}
      <PlacementDatePicker<StructureFormField>
        placementdate={formData.placementdate}
        setplacementdate={(placementdate) => updateFormData({ placementdate })}
        clearError={(field: string) => clearError(field as StructureFormField)}
        errors={errors}
        handleFieldBlur={handleFieldBlur}
        validateField={validateField}
        formatDateToString={formatDateToString}
      />

      {/* Coupon % */}
      <div className="group">
        <TextBox
          label="Coupon %"
          type="text"
          placeholder="Enter coupon percentage"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.couponpercentage}
          onChange={(e) => updateFormData({ couponpercentage: e.target.value })}
        />
      </div>

      {/* Expiry Date */}
      <div className="group">
        <DatePicker
          label="Expiry Date"
          value={formData.expirydate}
          onChange={(date: Date) => updateFormData({ expirydate: formatDateToString(date) })}
          className="text-sm transition-all duration-200 group-hover:shadow-md"
        />
      </div>

      {/* Observation Date */}
      <div className="group">
        <DatePicker
          label="Observation Date"
          value={formData.observationdate}
          onChange={(date: Date) => updateFormData({ observationdate: formatDateToString(date) })}
          className="text-sm transition-all duration-200 group-hover:shadow-md"
        />
      </div>

      {/* KO Barrier */}
      <div className="group">
        <TextBox
          label="KO Barrier"
          type="text"
          placeholder="Enter KO barrier"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.kobarrier}
          onChange={(e) => updateFormData({ kobarrier: e.target.value })}
        />
      </div>

      {/* Product Type */}
      <div className="group">
        <TextBox
          label="Product Type"
          type="text"
          placeholder="Enter product type"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.producttype}
          onChange={(e) => updateFormData({ producttype: e.target.value })}
        />
      </div>
      
      {/* Security Ticker/ISIN */}
      <div className="group">
        <TextBox
          label="Security Ticker/ISIN"
          placeholder="Enter ticker or ISIN"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.ticker}
          onChange={(e) => {
            updateFormData({ ticker: e.target.value });
            clearError("ticker");
          }}
          onBlur={() => {
            if (!formData.ticker.trim()) {
              setErrors((prev) => ({ ...prev, ticker: "Security ticker/ISIN is required." }));
            }
          }}
          error={errors.ticker}
        />
      </div>

      {/* Structure Name */}
      <div className="group">
        <TextBox
          label="Structure Name"
          placeholder="Enter structure name"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.securityname}
          onChange={(e) => {
            updateFormData({ securityname: e.target.value });
            clearError("securityname");
          }}
          onBlur={() => {
            if (!formData.securityname.trim()) {
              setErrors((prev) => ({ ...prev, securityname: "Structure name is required." }));
            }
          }}
          error={errors.securityname}
        />
      </div>
      
      {/* Structure Amount */}
      <div className="group">
        <TextBox
          label="Structure Amount"
          placeholder="Enter structure amount"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.structureamount}
          onChange={(e) => updateFormData({ structureamount: e.target.value })}
        />
      </div>

      {/* Non Call Period + Duration Unit */}
      <div className="group sm:col-span-2">
        <div className="flex gap-4 items-end">
          <div className="flex-1">
            <TextBox
              label="Non Call Period"
              placeholder="Enter non call period"
              className="text-sm transition-all duration-200 group-hover:shadow-md"
              value={formData.nocallperiod}
              onChange={(e) => updateFormData({ nocallperiod: e.target.value })}
            />
          </div>
          <div className="flex-1">
            <SearchableSelect
              label=" "
              apiUrl="/api/searchabledropdown/daysduration"
              value={formData.durationUnit}
              onChange={(durationUnit) => updateFormData({ durationUnit })}
              placeholder="Select unit..."
            />
          </div>
        </div>
      </div>

      {/* Amount (Disabled) */}
      <div className="group">
        <div className="relative">
          <TextBox
            label="Amount"
            placeholder="Auto-calculated"
            type="number"
            className="text-sm bg-gradient-to-r from-slate-50 to-slate-100/50 border-slate-300/50 font-semibold text-slate-700"
            value={amountDisplayValue}
            onChange={(e) => updateFormData({ amount: e.target.value })}
            disabled
            readOnly
          />
          <div className="absolute inset-0 pointer-events-none rounded-lg bg-gradient-to-br from-[#428B4D]/5 to-transparent"></div>
        </div>
      </div>

      {/* Currency */}
      <div className="group">
        <SearchableSelect
          label="Currency (if different)"
          apiUrl="/api/searchabledropdown/currencylist"
          value={formData.p_currency}
          onChange={(p_currency) => updateFormData({ p_currency })}
          placeholder="Select currency..."
        />
      </div>

      {/* Bank Advice Ref No */}
      <div className="group">
        <TextBox
          label="Bank Advice Ref No"
          placeholder="Enter reference number"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.bankadviserefno}
          onChange={(e) => updateFormData({ bankadviserefno: e.target.value })}
        />
      </div>

      {/* Strike Percentage */}
      <div className="group">
        <TextBox
          label="Strike Percentage"
          placeholder="Enter strike percentage"
          type="number"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.strikepercentage}
          onChange={(e) => updateFormData({ strikepercentage: e.target.value })}
        />
      </div>

      {/* Bank */}
      <div className="group flex items-end gap-2 transition-all duration-200 hover:shadow-md hover:shadow-[#428B4D]/10">
        <div className="flex-1">
          <SearchableSelect
            label="Bank"
            apiUrl="/api/searchabledropdown/banklist"
            value={formData.bank}
            onChange={(bank) => updateFormData({ bank })}
            placeholder="Select bank..."
          />
        </div>
        <button
          type="button"
          onClick={() => setShowBankModal(true)}
          className="mb-[2px] h-8 w-8 flex items-center justify-center rounded-md border border-gray-300 hover:border-[#428B4D] hover:bg-[#428B4D]/10 transition"
          title="Add new Bank"
        >
          <Plus className="h-5 w-5 text-[#428B4D]" />
        </button>
      </div>

      {/* Start Date */}
      <div className="group">
        <DatePicker
          label="Start Date"
          value={formData.startdate}
          onChange={(date: Date) => updateFormData({ startdate: formatDateToString(date) })}
          className="text-sm transition-all duration-200 group-hover:shadow-md"
        />
      </div>

      {/* Underlying Options Section */}
      <div className="relative sm:col-span-4 overflow-hidden rounded-lg border border-slate-200 bg-white p-6 shadow-sm transition-all duration-200 hover:shadow-md">
        <div className="relative flex flex-wrap items-center justify-between gap-4 border-b border-slate-200 pb-4 mb-4">
          <div className="space-y-1">
            <p className="text-sm font-semibold uppercase tracking-[0.35em] text-slate-400">
              Underlying Options
            </p>
            <p className="text-xs text-slate-500">
              Capture the full breakdown for each structure leg below.
            </p>
          </div>
          <span className="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-slate-50 to-slate-100 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-slate-600 border border-slate-200/60">
            <span className="flex h-5 w-5 items-center justify-center rounded-lg bg-[#428B4D]/10 text-[#428B4D] font-bold">
              {rows.length}
            </span>
            Rows Active
          </span>
        </div>

        <div className="relative mt-4 space-y-4">
          {rows.map((_, index) => (
            <OptionRow
              key={index}
              currencies={currencies}
              onAdd={addRow}
              onRemove={() => removeRow(index)}
              canRemove={rows.length > 1}
            />
          ))}
        </div>
      </div>
      
      {/* Commission */}
      <div className="group">
        <TextBox
          label="Commission"
          placeholder="Enter commission amount"
          type="number"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.commission}
          onChange={(e) => updateFormData({ commission: e.target.value })}
        />
      </div>
      
      {/* Charges & Fees Abroad */}
      <div className="group">
        <TextBox
          label="Charges and Fees Abroad"
          placeholder="Enter charges amount"
          type="number"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.chargesandfees}
          onChange={(e) => updateFormData({ chargesandfees: e.target.value })}
        />
      </div>

      {/* Federal Turnover Tax */}
      <div className="group">
        <TextBox
          label="Federal Turnover Tax"
          placeholder="Enter tax amount"
          type="number"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.federalturnovertax}
          onChange={(e) => updateFormData({ federalturnovertax: e.target.value })}
        />
      </div>

      {/* Relationship Manager */}
      <div className="group">
        <TextBox
          label="Relationship Manager"
          placeholder="Enter manager name"
          type="text"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.relationshipmanager}
          onChange={(e) => updateFormData({ relationshipmanager: e.target.value })}
        />
      </div>

      {/* Remarks / Comments */}
      <div className="group sm:col-span-4">
        <TextArea
          label="Remarks / Comments"
          placeholder="Enter detailed remarks or comments..."
          value={formData.remarks}
          onChange={(e) => updateFormData({ remarks: e.target.value })}
          rows={4}
          textareaClass="transition-all duration-200 group-hover:shadow-md"
        />
      </div>

      {/* Purpose */}
      <div className="group sm:col-span-4">
        <TextArea
          label="Purpose"
          placeholder="Enter purpose or description..."
          value={formData.description}
          onChange={(e) => updateFormData({ description: e.target.value })}
          rows={4}
          textareaClass="transition-all duration-200 group-hover:shadow-md"
        />
      </div>

      {/* File Upload */}
      <div className="group sm:col-span-4">
        <div className="relative p-6 rounded-lg bg-gradient-to-br from-slate-50/80 to-white border-2 border-dashed border-slate-200 hover:border-[#428B4D]/40 transition-all duration-300">
          <FileUploader
            label="Upload Document"
            onFileChange={setSelectedFile}
            maxSizeMB={1}
            allowedTypes={["application/pdf", "image/png", "image/jpg", "image/jpeg"]}
          />
        </div>
      </div>
    </div>
  );
};