import SearchableSelect from "@/components/ui/SearchableSelect";
import { TextBox } from "@/components/ui/TextBox";
import DatePicker from "@/components/ui/DatePicker";
import { FileUploader } from "@/components/ui/FileUploader";
import { InterestDividendFormField } from "@/components/validation/FormFields";

interface InterestDividendFormFieldsProps {
  formData: {
    placementdate: string;
    transactiontype: { label: string; value: string } | null;
    type: { label: string; value: string } | null;
    transactionrefno: { label: string; value: string } | null;
    md: { label: string; value: string } | null;
    bankadviserefno: string;
    commission: string;
    chargesandfees: string;
    federalturnovertax: string;
    quantity: string;
    amount: string;
    total: string;
  };
  errors: Partial<Record<InterestDividendFormField, string>>;
  clearError: (field: string) => void;
  handleFieldBlur: (field: InterestDividendFormField, validateField: (field: InterestDividendFormField) => string | undefined) => void;
  validateField: (field: InterestDividendFormField) => string | undefined;
  updateFormData: (updates: Partial<any>) => void;
  formatDateToString: (date: Date) => string;
  handlePlacementDateChange: (date: Date) => void;
  handleTransactionRefChange: (option: { label: string; value: string } | null) => void;
  handleQuantityChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  handleAmountChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  setSelectedFile: (file: File | null) => void;
}

export function InterestDividendFormFields({
  formData,
  errors,
  clearError,
  handleFieldBlur,
  validateField,
  updateFormData,
  formatDateToString,
  handlePlacementDateChange,
  handleTransactionRefChange,
  handleQuantityChange,
  handleAmountChange,
  setSelectedFile,
}: InterestDividendFormFieldsProps) {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {/* Placement Date */}
      <div className="group">
        <DatePicker
          label="Placement Date"
          value={formData.placementdate}
          onChange={handlePlacementDateChange}
          error={errors.placementdate}
          onBlur={() => handleFieldBlur("placementdate", validateField)}
          className="text-sm transition-all duration-200 group-hover:shadow-md"
        />
      </div>

      {/* Transaction Type */}
      <div className="group">
        <SearchableSelect
          label="Transaction Type"
          apiUrl="/api/searchabledropdown/dplist"
          value={formData.transactiontype}
          onChange={(option) => updateFormData({ transactiontype: option })}
          placeholder="Select transaction type..."
        />
      </div>

      {/* Type */}
      <div className="group">
        <SearchableSelect
          label="Type"
          apiUrl="/api/searchabledropdown/dtypelist"
          value={formData.type}
          onChange={(option) => updateFormData({ type: option })}
          placeholder="Select type..."
        />
      </div>

      {/* Transaction Ref. # */}
      <div className="group">
        <SearchableSelect
          label="Transaction Ref. #"
          apiUrl="/api/searchabledropdown/transactionlist"
          value={formData.transactionrefno}
          onChange={handleTransactionRefChange}
          placeholder="Select transaction ref..."
          onBlur={() => handleFieldBlur("transactionRef", validateField)}
          error={errors.transactionRef}
        />
      </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>

      {/* 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 and 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>

      {/* Quantity (No. of Shares) */}
      <div className="group">
        <TextBox
          label="Quantity (No. of Shares)"
          placeholder="Enter quantity"
          type="number"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.quantity}
          onChange={handleQuantityChange}
          onBlur={() => handleFieldBlur("quantity", validateField)}
          error={errors.quantity}
        />
      </div>

      {/* Amount */}
      <div className="group">
        <TextBox
          label="Amount"
          placeholder="Enter amount"
          type="number"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.amount}
          onChange={handleAmountChange}
          onBlur={() => handleFieldBlur("amount", validateField)}
          error={errors.amount}
        />
      </div>

      {/* MD */}
      <div className="group">
        <SearchableSelect
          label="MD"
          apiUrl="/api/searchabledropdown/mdlist"
          value={formData.md}
          onChange={(option) => updateFormData({ md: option })}
          placeholder="Select MD..."
        />
      </div>

      {/* Net Amount per Share */}
      <div className="group">
        <TextBox
          label="Net Amount per Share"
          placeholder="Enter amount per share"
          type="number"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.total}
          onChange={(e) => updateFormData({ total: e.target.value })}
        />
      </div>

      {/* File Upload */}
      <div className="group sm:col-span-2 lg: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>
  );
}