'use client';
import { Button, Form, Switch } from 'antd';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { AppDrawer } from '@/components/ui/drawers/AppDrawer';
import { AppInput } from '@/components/ui/inputs/AppInput';
import { AppTextarea } from '@/components/ui/inputs/AppTextarea';
import { AppSelect } from '@/components/ui/selects/AppSelect';
import { createJobSchema, type CreateJobFormData } from './job.schema';

const JOB_TYPE_OPTIONS = [
  { label: 'Full Time', value: 'full_time' },
  { label: 'Part Time', value: 'part_time' },
  { label: 'Contract', value: 'contract' },
  { label: 'Daily Wage', value: 'daily_wage' },
  { label: 'Internship', value: 'internship' },
];

const EXP_LEVEL_OPTIONS = [
  { label: 'Fresher', value: 'fresher' },
  { label: 'Junior (1-2 yrs)', value: 'junior' },
  { label: 'Mid (2-5 yrs)', value: 'mid' },
  { label: 'Senior (5+ yrs)', value: 'senior' },
  { label: 'Expert', value: 'expert' },
];

const SALARY_TYPE_OPTIONS = [
  { label: 'Hourly', value: 'hourly' },
  { label: 'Daily', value: 'daily' },
  { label: 'Weekly', value: 'weekly' },
  { label: 'Monthly', value: 'monthly' },
  { label: 'Yearly', value: 'yearly' },
  { label: 'Fixed', value: 'fixed' },
];

interface CreateJobDrawerProps {
  open: boolean;
  loading?: boolean;
  onClose: () => void;
  onSubmit: (data: CreateJobFormData) => void;
}

export function CreateJobDrawer({ open, loading, onClose, onSubmit }: CreateJobDrawerProps) {
  const { control, handleSubmit, reset } = useForm<CreateJobFormData>({
    resolver: zodResolver(createJobSchema),
    defaultValues: {
      title: '', description: '', employerId: '', categoryId: '',
      jobType: 'full_time', openings: 1, isRemote: false,
    },
  });

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

  return (
    <AppDrawer
      title="Create New Job"
      subtitle="Post a job on behalf of an employer"
      open={open}
      onClose={handleClose}
      width={580}
      footer={
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <Button onClick={handleClose}>Cancel</Button>
          <Button
            type="primary"
            loading={loading}
            onClick={handleSubmit((d) => { onSubmit(d); handleClose(); })}
          >
            Create Job
          </Button>
        </div>
      }
    >
      <Form layout="vertical" component="div">
        <AppInput<CreateJobFormData>
          name="title"
          control={control}
          label="Job Title"
          placeholder="e.g. Senior Electrician"
          required
        />
        <AppInput<CreateJobFormData>
          name="employerId"
          control={control}
          label="Employer ID"
          placeholder="Enter employer UUID"
          required
        />
        <AppSelect<CreateJobFormData>
          name="jobType"
          control={control}
          label="Job Type"
          options={JOB_TYPE_OPTIONS}
          required
        />
        <AppSelect<CreateJobFormData>
          name="experienceLevel"
          control={control}
          label="Experience Level"
          options={EXP_LEVEL_OPTIONS}
        />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <AppInput<CreateJobFormData>
            name="minSalary"
            control={control}
            label="Min Salary (₹)"
            placeholder="e.g. 15000"
          />
          <AppInput<CreateJobFormData>
            name="maxSalary"
            control={control}
            label="Max Salary (₹)"
            placeholder="e.g. 30000"
          />
        </div>
        <AppSelect<CreateJobFormData>
          name="salaryType"
          control={control}
          label="Salary Period"
          options={SALARY_TYPE_OPTIONS}
        />
        <AppInput<CreateJobFormData>
          name="openings"
          control={control}
          label="Number of Openings"
          placeholder="1"
        />
        <AppInput<CreateJobFormData>
          name="address"
          control={control}
          label="Job Location / Address"
          placeholder="Full address or area"
        />
        <AppInput<CreateJobFormData>
          name="applicationDeadline"
          control={control}
          label="Application Deadline"
          placeholder="YYYY-MM-DD"
        />
        <AppTextarea<CreateJobFormData>
          name="description"
          control={control}
          label="Job Description"
          placeholder="Detailed job description, responsibilities, requirements..."
          rows={5}
          required
        />
        <AppTextarea<CreateJobFormData>
          name="requirements"
          control={control}
          label="Requirements"
          placeholder="List specific requirements..."
          rows={3}
        />
        <AppTextarea<CreateJobFormData>
          name="benefits"
          control={control}
          label="Benefits & Perks"
          placeholder="Describe what the employer offers..."
          rows={3}
        />
        <Form.Item label="Remote Job">
          <Controller
            name="isRemote"
            control={control}
            render={({ field }) => (
              <Switch checked={field.value} onChange={field.onChange} />
            )}
          />
        </Form.Item>
      </Form>
    </AppDrawer>
  );
}