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

type Props = {
  form: UseFormReturn<SellerWizardValues>;
  sellerTypes: { id: number; name: string }[];
};

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

export default function StepBusinessInfo({ form, sellerTypes }: Props) {
  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">Business Information</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">
            Business Name <span className="text-red-500">*</span>
          </label>
          <input
            {...register("company_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 business name"
          />
          <ErrorText message={errors.company_name?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            GST <span className="text-red-500">*</span>
          </label>
          <input
            {...register("gst_number")}
            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 GST number"
          />
          <ErrorText message={errors.gst_number?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            PAN <span className="text-red-500">*</span>
          </label>
          <input
            {...register("pan_number")}
            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 PAN number"
          />
          <ErrorText message={errors.pan_number?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Business Type <span className="text-red-500">*</span>
          </label>
          <select
            {...register("seller_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 business type</option>
            {sellerTypes.map((type) => (
              <option key={type.id} value={String(type.id)}>
                {type.name}
              </option>
            ))}
          </select>
          <ErrorText message={errors.seller_type?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Constitution Type <span className="text-red-500">*</span>
          </label>
          <select
            {...register("constitution_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 constitution type</option>
            <option value="proprietorship">Proprietorship</option>
            <option value="partnership">Partnership</option>
            <option value="llp">LLP</option>
            <option value="private_limited">Private Limited</option>
            <option value="public_limited">Public Limited</option>
          </select>
          <ErrorText message={errors.constitution_type?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Years in Business <span className="text-red-500">*</span>
          </label>
          <input
            {...register("years_in_business")}
            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="e.g. 5"
          />
          <ErrorText message={errors.years_in_business?.message} />
        </div>

        <div className="md:col-span-2">
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Address <span className="text-red-500">*</span>
          </label>
          <input
            {...register("company_address")}
            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 business address"
          />
          <ErrorText message={errors.company_address?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            City <span className="text-red-500">*</span>
          </label>
          <input
            {...register("city")}
            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 city"
          />
          <ErrorText message={errors.city?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            State <span className="text-red-500">*</span>
          </label>
          <input
            {...register("state")}
            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 state"
          />
          <ErrorText message={errors.state?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Country <span className="text-red-500">*</span>
          </label>
          <input
            {...register("country")}
            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 country"
          />
          <ErrorText message={errors.country?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Pincode <span className="text-red-500">*</span>
          </label>
          <input
            {...register("pincode")}
            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 pincode"
          />
          <ErrorText message={errors.pincode?.message} />
        </div>
      </div>
    </div>
  );
}