import type { UseFormReturn } from "react-hook-form";
import type { SellerWizardValues } from "./seller.schema";

function ErrorText({ message }: { message?: string }) {
  if (!message) return null;
  return <p className="mt-1 text-xs text-red-600">{message}</p>;
}

export default function StepBank({ form }: { form: UseFormReturn<SellerWizardValues> }) {
  const {
    register,
    formState: { errors },
  } = form;

  return (
    <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
      <h3 className="mb-4 text-sm font-semibold text-gray-900">Bank Details</h3>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Account Name <span className="text-red-500">*</span>
          </label>
          <input
            {...register("account_holder_name")}
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none focus:ring-1 focus:ring-[#CC1414]"
            placeholder="Enter account name"
          />
          <ErrorText message={errors.account_holder_name?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Bank Name <span className="text-red-500">*</span>
          </label>
          <input
            {...register("bank_name")}
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none focus:ring-1 focus:ring-[#CC1414]"
            placeholder="Enter bank name"
          />
          <ErrorText message={errors.bank_name?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Account Number <span className="text-red-500">*</span>
          </label>
          <input
            {...register("account_number")}
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none focus:ring-1 focus:ring-[#CC1414]"
            placeholder="Enter account number"
          />
          <ErrorText message={errors.account_number?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            IFSC <span className="text-red-500">*</span>
          </label>
          <input
            {...register("ifsc_code")}
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm uppercase focus:border-[#CC1414] focus:outline-none focus:ring-1 focus:ring-[#CC1414]"
            placeholder="Enter IFSC code"
          />
          <ErrorText message={errors.ifsc_code?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Account Type <span className="text-red-500">*</span>
          </label>
          <select
            {...register("account_type")}
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none focus:ring-1 focus:ring-[#CC1414]"
          >
            <option value="">Select account type</option>
            <option value="savings">Savings</option>
            <option value="current">Current</option>
          </select>
          <ErrorText message={errors.account_type?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Branch <span className="text-red-500">*</span>
          </label>
          <input
            {...register("branch")}
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none focus:ring-1 focus:ring-[#CC1414]"
            placeholder="Enter branch name"
          />
          <ErrorText message={errors.branch?.message} />
        </div>
      </div>
    </div>
  );
}