import PlacementDatePicker from "@/fields/PlacementDate";
import TransactionTypeSelect from "@/fields/TypeOfTransaction";
import ExecutionTypeSelect from "@/fields/ExecutionType";
import BankAdviceRefNoInput from "@/fields/BankAdviceNo";
import QuantityInput from "@/fields/Quantity";
import SecurityTickerInput from "@/fields/SecurityTicker";
import SecurityNameInput from "@/fields/SecurityName";
import BankNotesInput from "@/fields/BankNotes";
import PricePerSecurityInput from "@/fields/PricePerSecurity";
import EffectiveDatePicker from "@/fields/EffectiveDate";
import MaturityDatePicker from "@/fields/MaturityDate";
import AmountDisplay from "@/fields/Amount";
import CommissionInput from "@/fields/Comission";
import ChargesAndFeesInput from "@/fields/ChargesFeesAbroad";
import FederalTurnoverTaxInput from "@/fields/FederalTurnOver";
import CurrencySelect from "@/fields/Currency";
import AssetTypeOtherInput from "@/fields/AssetTypeOther";
import BankSelect from "@/fields/Bank";
import RemarksInput from "@/fields/Remarks";
import PurposeInput from "@/fields/Purpose";
import MarketPriceInput from "@/fields/MarketPrice";
import RelationshipManagerInput from "@/fields/RelationshipManager";
import { OtherAssetsFormField } from "@/hooks/useOtherAssetsForm";
import { formatDateToString } from "@/lib/common";
import TargetPriceInput from "@/fields/TargetPrice";
import { useState,useRef,useEffect } from "react";
import SearchableSelect2 from "@/components/ui/SearchableSelect2"; // adjust path
type SecurityOption = {
  label: string;
  value: string;
  ticker?: string;
  isin?: string;
};
interface OtherAssetsFormFieldsProps {
  formData: {
    t_o_t: { label: string; value: string } | null;
    e_t: { label: string; value: string } | null;
    p_currency: { label: string; value: string } | null;
    aassettype: string;
    bank: { label: string; value: string } | null;
    bankadviserefno: string;
    placementdate: string;
    quantity: string;
    ticker: string;
    securityname: string;
    pricepersecurity: string;
    effectivedate: string;
    maturitydate: string;
    amount: string;
    commission: string;
    chargesandfees: string;
    federalturnovertax: string;
    targetprice: string;
    marketprice: string;
    relationshipmanager: string;
    description: string;
    banknotes: string;
    remarks: string;
    parentHedgeFundLabel: string;
    parentRefId: string;
  };
  isSaleMode: boolean;
  amountDisplayValue: string;
  errors: Record<string, string>;
  clearError: (field: string) => void;
  handleFieldBlur: (field: OtherAssetsFormField, validateField: (field: OtherAssetsFormField) => string | undefined) => void;
  validateField: (field: OtherAssetsFormField) => string | undefined;
  updateFormData: (updates: any) => void;
  formatDateToString: (date: Date) => string;
  setShowBankModal: (show: boolean) => void;
}
function ReadOnlyField({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex flex-col gap-1">
      <label className="text-xs font-medium text-slate-500 uppercase tracking-wide">
        {label}
      </label>
      <div className="flex h-10 w-full items-center rounded-md border border-slate-200 bg-slate-100 px-3 text-sm text-slate-700 select-none cursor-default">
        {value || <span className="text-slate-400">—</span>}
      </div>
    </div>
  );
}
export const OtherAssetsFormFields = ({
  formData,
  amountDisplayValue,
  errors,
  clearError,
  handleFieldBlur,
  validateField,
  updateFormData,
  formatDateToString,
  setShowBankModal,
  isSaleMode,
}: OtherAssetsFormFieldsProps) => {
  const [selectedSecurity, setSelectedSecurity] = useState<SecurityOption | null>(null);
    const rawInputRef = useRef("");  // use ref instead of state (no timing issues)
    useEffect(() => {
      if (formData.ticker && !selectedSecurity) {
        setSelectedSecurity({
          label: `${formData.ticker} (${formData.securityname})`,
          value: formData.ticker,
          ticker: formData.ticker,
          isin: formData.securityname,
        });
      }
    }, [formData.ticker, formData.securityname]);
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         {isSaleMode && (
        <>
          {/* Bond — spans 3 columns to match the wide field in the screenshot */}
          <div className="sm:col-span-2 lg:col-span-3">
            <ReadOnlyField
            label="Other Asset"
            value={formData.parentHedgeFundLabel}
          />
          </div>

          {/* Ref. ID — single column */}
          <div className="sm:col-span-1 lg:col-span-1">
            <ReadOnlyField label="Ref. ID" value={formData.parentRefId} />
          </div>
        </>
      )}
      {/* Placement Date */}
      <PlacementDatePicker<OtherAssetsFormField>
        placementdate={formData.placementdate}
        setplacementdate={(placementdate) => updateFormData({ placementdate })}
        clearError={(field: string) => clearError(field as OtherAssetsFormField)}
        errors={errors}
        handleFieldBlur={handleFieldBlur}
        validateField={validateField}
        formatDateToString={formatDateToString}
      />

      {/* Type of Transaction */}
      <TransactionTypeSelect<OtherAssetsFormField>
        t_o_t={formData.t_o_t}
        sett_o_t={(t_o_t) => updateFormData({ t_o_t })}
        clearError={(field: string) => clearError(field as OtherAssetsFormField)}
        errors={errors}
        handleFieldBlur={handleFieldBlur}
        validateField={validateField}
        isDisabled={isSaleMode} 
      />

      {/* Execution Type */}
      <ExecutionTypeSelect<OtherAssetsFormField>
        e_t={formData.e_t}
        sete_t={(e_t) => updateFormData({ e_t })}
        clearError={(field: string) => clearError(field as OtherAssetsFormField)}
        errors={errors}
        handleFieldBlur={handleFieldBlur}
        validateField={validateField}
      />

      {/* Bank Advice Ref No */}
      <BankAdviceRefNoInput
        bankadviserefno={formData.bankadviserefno}
        setbankadviserefno={(bankadviserefno) => updateFormData({ bankadviserefno })}
      />

      {/* Quantity */}
      <QuantityInput<OtherAssetsFormField>
        quantity={formData.quantity}
        setquantity={(quantity) => updateFormData({ quantity })}
        clearError={(field: string) => clearError(field as OtherAssetsFormField)}
        errors={errors}
        handleFieldBlur={handleFieldBlur}
        validateField={validateField}
      />

      {/* Security Ticker/ISIN */}
      <div className="group">
        <SearchableSelect2
          label="Security Ticker/ISIN"
          apiUrl="/api/searchabledropdown/autocomplete_stockname_by_name"
          value={selectedSecurity}
          displayValue={(option) => option?.ticker ?? option?.label?.split(" (")[0] ?? ""} 
          onInputChange={(inputValue) => {
            rawInputRef.current = inputValue;
          }}
          onChange={(option) => {
            const ticker       = option?.ticker ?? "";
            const securityname = option?.isin   ?? "";

            setSelectedSecurity(option as SecurityOption | null);
            updateFormData({ ticker, securityname });
            rawInputRef.current = "";
            clearError("ticker");
            clearError("isin");
            clearError("securityname");
          }}
          onBlur={() => {
            handleFieldBlur("ticker", validateField);
          }}
          placeholder="Type ticker or ISIN..."
          serverSideSearch={true}
          error={errors.ticker ?? errors.isin}
        />
      </div>

      {/* Security Name */}
      <SecurityNameInput<OtherAssetsFormField>
        securityname={formData.securityname}
        setsecurityname={(securityname) => updateFormData({ securityname })}
        clearError={(field: string) => clearError(field as OtherAssetsFormField)}
        errors={errors}
        handleFieldBlur={handleFieldBlur}
        validateField={validateField}
      />

      {/* Bank Notes */}
      <BankNotesInput
        banknotes={formData.banknotes}
        setbanknotes={(banknotes) => updateFormData({ banknotes })}
      />

      {/* Price per Security */}
      <PricePerSecurityInput<OtherAssetsFormField>
        pricepersecurity={formData.pricepersecurity}
        setpricepersecurity={(pricepersecurity) => updateFormData({ pricepersecurity })}
        clearError={(field: string) => clearError(field as OtherAssetsFormField)}
        errors={errors}
        handleFieldBlur={handleFieldBlur}
        validateField={validateField}
      />

      {/* Effective Date */}
      <EffectiveDatePicker
        effectivedate={formData.effectivedate}
        seteffectivedate={(effectivedate) => updateFormData({ effectivedate })}
        formatDateToString={formatDateToString}
      />

      {/* Maturity Date */}
      {/* <MaturityDatePicker
        maturitydate={formData.maturitydate}
        setmaturitydate={(maturitydate) => updateFormData({ maturitydate })}
        formatDateToString={formatDateToString}
      /> */}

      {/* Amount */}
      <AmountDisplay
        amountDisplayValue={amountDisplayValue}
      />

      {/* Commission */}
      <CommissionInput
        commission={formData.commission}
        setcommission={(commission) => updateFormData({ commission })}
      />

      {/* Charges & Fees Abroad */}
      <ChargesAndFeesInput
        chargesandfees={formData.chargesandfees}
        setchargesandfees={(chargesandfees) => updateFormData({ chargesandfees })}
      />

      {/* Federal Turnover Tax */}
      <FederalTurnoverTaxInput
        federalturnovertax={formData.federalturnovertax}
        setfederalturnovertax={(federalturnovertax) => updateFormData({ federalturnovertax })}
      />

      {/* Currency */}
      <CurrencySelect
        p_currency={formData.p_currency}
        setp_currency={(p_currency) => updateFormData({ p_currency })}
      />

      {/* Asset Type */}
      <AssetTypeOtherInput
        aassettype={formData.aassettype}
        setaassettype={(aassettype) => updateFormData({ aassettype })}
        clearError={(field: string) => clearError(field as OtherAssetsFormField)}
        errors={errors}
        handleFieldBlur={handleFieldBlur}
        validateField={validateField}
      />

      {/* Bank */}
      <BankSelect
        bank={formData.bank}
        setbank={(bank) => updateFormData({ bank })}
        setShowBankModal={setShowBankModal}
      />
      <MarketPriceInput<OtherAssetsFormField>
        targetprice={formData.marketprice}
        settargetprice={(marketprice) =>
          updateFormData({ marketprice })
        }
        clearError={(field: string) =>
          clearError(field as OtherAssetsFormField)
        }
        errors={errors}
        handleFieldBlur={handleFieldBlur}
        validateField={validateField}
      />
      {/* Remarks / Comments */}
      <RemarksInput
        remarks={formData.remarks}
        setRemarks={(remarks) => updateFormData({ remarks })}
      />

      {/* Purpose */}
      <PurposeInput
        description={formData.description}
        setDescription={(description) => updateFormData({ description })}
      />

      {/* Target Price */}

      <TargetPriceInput
        targetprice={formData.targetprice}
        settargetprice={(targetprice) => updateFormData({ targetprice })}
      />
      {/* Relationship Manager */}
      <RelationshipManagerInput
        relationshipmanager={formData.relationshipmanager}
        setrelationshipmanager={(relationshipmanager) => updateFormData({ relationshipmanager })}
      />
    </div>
  );
};