'use client';

import { Building2, Mail } from 'lucide-react';
import type { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
import { Input } from '@/components/ui/shared/Input';

export type OrganizationDetailsFormValues = {
  organizationName: string;
  organizationEmail: string;
  organizationType: 'CLINIC' | 'LAB';
};

type OrganizationDetailsFieldsProps = {
  register: UseFormRegister<OrganizationDetailsFormValues>;
  errors: FieldErrors<OrganizationDetailsFormValues>;
  organizationType: 'CLINIC' | 'LAB' | undefined;
  setValue: UseFormSetValue<OrganizationDetailsFormValues>;
};

export function OrganizationDetailsFields({
  register,
  errors,
  organizationType,
  setValue,
}: OrganizationDetailsFieldsProps) {
  return (
    <>
      <Input
        label="Organization name"
        {...register('organizationName')}
        placeholder="Sunshine Dental Clinic"
        error={errors.organizationName?.message}
        icon={<Building2 className="h-5 w-5 icon-flat" />}
      />
      <Input
        label="Organization email"
        {...register('organizationEmail')}
        type="email"
        placeholder="contact@sunshineclinic.com"
        error={errors.organizationEmail?.message}
        icon={<Mail className="h-5 w-5 icon-flat" />}
      />
      <div>
        <label className="block text-sm font-medium text-text-secondary mb-2">
          Organization type
        </label>
        <input type="hidden" {...register('organizationType')} />
        <div className="grid grid-cols-2 gap-4">
          <button
            type="button"
            onClick={() => {
              setValue('organizationType', 'CLINIC', { shouldValidate: true });
            }}
            className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${
              organizationType === 'CLINIC'
                ? 'border-primary/60 bg-primary-soft text-text-primary'
                : 'border-border text-text-secondary hover:border-border-strong'
            }`}
          >
            <Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
            <span className="text-sm font-medium">Dental Clinic</span>
          </button>
          <button
            type="button"
            onClick={() => {
              setValue('organizationType', 'LAB', { shouldValidate: true });
            }}
            className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${
              organizationType === 'LAB'
                ? 'border-primary/60 bg-primary-soft text-text-primary'
                : 'border-border text-text-secondary hover:border-border-strong'
            }`}
          >
            <Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
            <span className="text-sm font-medium">Dental Lab</span>
          </button>
        </div>
        {errors.organizationType && (
          <p className="mt-2 text-sm text-red-600">{errors.organizationType.message}</p>
        )}
      </div>
    </>
  );
}