'use client';
import { Form } from 'antd';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { FormModal } from '@/components/ui/modals/FormModal';
import { AppInput } from '@/components/ui/inputs/AppInput';
import { AppSelect } from '@/components/ui/selects/AppSelect';
import { AppTextarea } from '@/components/ui/inputs/AppTextarea';
import { rescheduleSchema, type RescheduleFormData } from './interview.schema';

const TYPE_OPTIONS = [
  { label: 'In-Person', value: 'in_person' },
  { label: 'Phone', value: 'phone' },
  { label: 'Video Call', value: 'video' },
];

interface Props {
  open: boolean;
  interviewId: string | null;
  loading?: boolean;
  onClose: () => void;
  onSubmit: (id: string, data: RescheduleFormData) => void;
}

export function RescheduleModal({ open, interviewId, loading, onClose, onSubmit }: Props) {
  const { control, handleSubmit, reset } = useForm<RescheduleFormData>({
    resolver: zodResolver(rescheduleSchema),
    defaultValues: { scheduled_at: '', interview_type: 'in_person', location: '', meeting_link: '', notes: '' },
  });

  const handleClose = () => { onClose(); reset(); };

  return (
    <FormModal
      title="Reschedule Interview"
      open={open}
      onClose={handleClose}
      onSubmit={handleSubmit((d) => {
        if (interviewId) { onSubmit(interviewId, d); handleClose(); }
      })}
      loading={loading}
      submitLabel="Reschedule"
      width={480}
    >
      <Form layout="vertical" component="div">
        <AppInput<RescheduleFormData>
          name="scheduled_at"
          control={control}
          label="New Date & Time"
          placeholder="2025-01-15T10:00:00"
          required
        />
        <AppSelect<RescheduleFormData>
          name="interview_type"
          control={control}
          label="Interview Type"
          options={TYPE_OPTIONS}
        />
        <AppInput<RescheduleFormData>
          name="location"
          control={control}
          label="Location (for in-person)"
          placeholder="Office address or venue"
        />
        <AppInput<RescheduleFormData>
          name="meeting_link"
          control={control}
          label="Meeting Link (for video)"
          placeholder="https://meet.google.com/..."
        />
        <AppTextarea<RescheduleFormData>
          name="notes"
          control={control}
          label="Instructions / Notes"
          placeholder="Any instructions for the candidate..."
          rows={3}
        />
      </Form>
    </FormModal>
  );
}