import { TextBox } from "@/components/ui/TextBox";
import { TextArea } from "@/components/ui/TextArea";
import { FileUploader } from "@/components/ui/FileUploader";
import { formatDateToString } from "@/lib/common";
import { CashWithdrawalFormField } from "@/components/validation/FormFields";
import PlacementDatePicker from "@/fields/PlacementDate";
import CurrencySelect from "@/fields/Currency";
import WithdrawTypeSelect from "@/fields/WithdrawType";
import BankSelect from "@/fields/Bank";

interface CashWithdrawalFormFieldsProps {
  formData: {
    placementdate: string;
    selectedcurrency: { label: string; value: string } | null;
    amount: string;
    withdrawType: { label: string; value: string } | null;
    bank: { label: string; value: string } | null;
    bankadviserefno: string;
    transactioncost: string;
    bankfees: string;
    tax: string;
    remarks: string;
    description: string;
    selectedFile: File | null;
  };
  errors: Record<string, string>;
  clearError: (field: string) => void;
  handleFieldBlur: (field: CashWithdrawalFormField, validator: (field: CashWithdrawalFormField) => string | undefined) => void;
  validateField: (field: CashWithdrawalFormField) => string | undefined;
  updateFormData: (updates: any) => void;
  formatDateToString: (date: Date) => string;
  setShowBankModal: (show: boolean) => void;
}

export const CashWithdrawalFormFields = ({
  formData,
  errors,
  clearError,
  handleFieldBlur,
  validateField,
  updateFormData,
  formatDateToString,
  setShowBankModal,
}: CashWithdrawalFormFieldsProps) => {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {/* Placement Date */}
      <PlacementDatePicker
        placementdate={formData.placementdate}
        setplacementdate={(date) => updateFormData({ placementdate: date })}
        clearError={clearError}
        errors={errors}
        handleFieldBlur={handleFieldBlur}
        validateField={validateField}
        formatDateToString={formatDateToString}
      />

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

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

      {/* Withdrawal Type */}
      <WithdrawTypeSelect<CashWithdrawalFormField>
        withdrawType={formData.withdrawType}
        setWithdrawType={(type) => updateFormData({ withdrawType: type })}
        clearError={clearError}
        errors={errors}
        handleFieldBlur={handleFieldBlur}
        validateField={validateField}
      />

      {/* Bank */}
      <BankSelect<CashWithdrawalFormField>
        bank={formData.bank}
        setbank={(bank) => updateFormData({ bank })}
        setShowBankModal={setShowBankModal}
        clearError={clearError}
        errors={errors}
        handleFieldBlur={handleFieldBlur}
        validateField={validateField}
        fieldName="bank"
      />

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

      {/* Transaction Costs */}
      <div className="group">
        <TextBox
          label="Transaction Costs"
          placeholder="Enter transaction costs"
          type="number"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.transactioncost}
          onChange={(e) => updateFormData({ transactioncost: e.target.value })}
        />
      </div>

      {/* Bank Fees */}
      <div className="group">
        <TextBox
          label="Bank Fees"
          placeholder="Enter bank fees"
          type="number"
          className="text-sm transition-all duration-200 group-hover:shadow-md"
          value={formData.bankfees}
          onChange={(e) => updateFormData({ bankfees: e.target.value })}
        />
      </div>

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

      {/* Remarks / Comments */}
      <div className="group sm:col-span-2 lg: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-2 lg: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-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={(file) => updateFormData({ selectedFile: file })}
            maxSizeMB={1}
            allowedTypes={["application/pdf", "image/png", "image/jpg", "image/jpeg"]}
          />
        </div>
      </div>
    </div>
  );
};