'use client';

import { useState } from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import Select from 'react-select';

import Upload from '../../ui/upload';
import { DatePicker } from '../../ui/datepicker';
import PrimaryButton from '@/components/common/primary-button';
import { useDrawer } from '../../common/Drawer';

type LabourFormValues = {
  name: string;
  mobile: string;
  email: string;
  gender: string;
  birthDate: Date | null;
  skills: { label: string; value: string }[];
  role: { label: string; value: string } | null;
  documents: File[];
  baseSalary: string;
  joiningDate: Date | null;
  address: string;
  pincode: string;
};

const skillOptions = [
  { label: 'Electrician', value: 'Electrician' },
  { label: 'Plumber', value: 'Plumber' },
  { label: 'Carpenter', value: 'Carpenter' },
  { label: 'Welder', value: 'Welder' },
  { label: 'Painter', value: 'Painter' },
];

const roleOptions = [
  { label: 'Supervisor', value: 'Supervisor' },
  { label: 'Worker', value: 'Worker' },
  { label: 'Foreman', value: 'Foreman' },
  { label: 'Helper', value: 'Helper' },
];

export default function LabourDrawer({
  onSubmit,
  initialData,
}: any) {
  const [files, setFiles] = useState<File[]>([]);
  const { closeDrawer } = useDrawer();

  const formik = useFormik<LabourFormValues>({
    enableReinitialize: true,
    initialValues: {
      name: initialData?.name || '',
      mobile: initialData?.mobile || '',
      email: initialData?.email || '',
      gender: initialData?.gender || '',
      birthDate: initialData?.birthDate ? new Date(initialData.birthDate) : null,
      role: initialData?.role || null,
      skills:
        initialData?.skills?.map((s: any) =>
          typeof s === 'string' ? { label: s, value: s } : s
        ) || [],
      documents: [],
      baseSalary: initialData?.baseSalary || '',
      joiningDate: initialData?.joiningDate ? new Date(initialData.joiningDate) : null,
      address: initialData?.address || '',
      pincode: initialData?.pincode || '',
    },

    validationSchema: Yup.object({
      name: Yup.string().required('Name is required'),
      mobile: Yup.string()
        .required('Mobile is required')
        .matches(/^[0-9]{10}$/, 'Enter valid mobile number'),
      email: Yup.string().email().required('Email is required'),
      baseSalary: Yup.number().required('Salary is required'),
      gender: Yup.string().required('Gender is required'),
      birthDate: Yup.date().required('Date of birth is required'),
      joiningDate: Yup.date().required('Joining date is required'),
      address: Yup.string().required('Address is required'),
      pincode: Yup.string()
        .matches(/^[0-9]{6}$/, 'Enter valid pincode')
        .required('Pincode is required'),
    }),

    onSubmit: (values, { resetForm }) => {
      onSubmit({
        ...values,
        id: initialData?.id,
        documents: files,
      });

      resetForm();
      setFiles([]);
      closeDrawer();
    },
  });

  return (
    <div className="flex flex-col h-full bg-white">
      <div className="flex items-center justify-between border-b px-6 py-4 shrink-0">
        <h2 className="text-lg font-semibold">
          {initialData ? 'Edit Labour' : 'Create Labour'}
        </h2>
        <button
          onClick={closeDrawer}
          className="text-gray-500 hover:text-black text-xl"
        >
          ✕
        </button>
      </div>
      <div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
        <form onSubmit={formik.handleSubmit} className="space-y-6">
          <div>
            <label className="text-sm font-medium">Labour Name</label>
            <input
              name="name"
              className="w-full border rounded-lg px-4 py-2 mt-1"
              value={formik.values.name}
              onChange={formik.handleChange}
            />
            <p className="text-red-500 text-sm">{formik.errors.name}</p>
          </div>

          {/* MOBILE + EMAIL */}
          <div className="grid grid-cols-2 gap-3">

            <div>
              <label className="text-sm font-medium">Mobile</label>
              <input
                name="mobile"
                className="w-full border rounded-lg px-4 py-2 mt-1"
                value={formik.values.mobile}
                onChange={formik.handleChange}
              />
              <p className="text-red-500 text-sm">{formik.errors.mobile}</p>
            </div>

            <div>
              <label className="text-sm font-medium">Email</label>
              <input
                name="email"
                className="w-full border rounded-lg px-4 py-2 mt-1"
                value={formik.values.email}
                onChange={formik.handleChange}
              />
              <p className="text-red-500 text-sm">{formik.errors.email}</p>
            </div>

          </div>

          {/* GENDER */}
          <div>
            <label className="text-sm font-medium">Gender</label>
            <div className="flex gap-4 mt-2">
              {['male', 'female', 'other'].map((g) => (
                <label key={g} className="flex items-center gap-2">
                  <input
                    type="radio"
                    name="gender"
                    value={g}
                    checked={formik.values.gender === g}
                    onChange={formik.handleChange}
                  />
                  {g}
                </label>
              ))}
            </div>
          </div>

          {/* DOB */}
          <div>
            <label className="text-sm font-medium">Date of Birth</label>
            <DatePicker
              selected={formik.values.birthDate}
              onChange={(date: Date | null) =>
                formik.setFieldValue('birthDate', date)
              }
            />
          </div>

          {/* SKILLS */}
          <div>
            <label className="text-sm font-medium">Skills</label>
            <Select
              isMulti
              options={skillOptions}
              value={formik.values.skills}
              onChange={(value) =>
                formik.setFieldValue('skills', value)
              }
            />
          </div>

          {/* ROLE */}
          <div>
            <label className="text-sm font-medium">Role</label>
            <Select
              options={roleOptions}
              value={formik.values.role}
              onChange={(value) =>
                formik.setFieldValue('role', value)
              }
            />
          </div>

          {/* UPLOAD */}
          <div>
            <label className="text-sm font-medium">Documents</label>
            <Upload
              accept="all"
              multiple
              label=""
              onChange={(e: any) => {
                if (e.target.files) {
                  setFiles(Array.from(e.target.files));
                }
              }}
            />
          </div>

          {/* SALARY + JOINING */}
          <div className="grid grid-cols-2 gap-3">

            <div>
              <label className="text-sm font-medium">Base Salary</label>
              <input
                name="baseSalary"
                type="number"
                className="w-full border rounded-lg px-4 py-2 mt-1"
                value={formik.values.baseSalary}
                onChange={formik.handleChange}
              />
            </div>

            <div>
              <label className="text-sm font-medium">Joining Date</label>
              <DatePicker
                selected={formik.values.joiningDate}
                onChange={(date: Date | null) =>
                  formik.setFieldValue('joiningDate', date)
                }
              />
            </div>

          </div>

          {/* ADDRESS */}
          <div>
            <label className="text-sm font-medium">Address</label>
            <textarea
              name="address"
              className="w-full border rounded-lg px-4 py-2 mt-1"
              value={formik.values.address}
              onChange={formik.handleChange}
            />
          </div>

          {/* PINCODE */}
          <div>
            <label className="text-sm font-medium">Pincode</label>
            <input
              name="pincode"
              className="w-full border rounded-lg px-4 py-2 mt-1"
              value={formik.values.pincode}
              onChange={formik.handleChange}
            />
          </div>

        </form>

      </div>

      {/* FOOTER */}
      <div className="border-t px-6 py-4 flex justify-end gap-2 shrink-0">

        <button
          type="button"
          onClick={closeDrawer}
          className="px-4 py-2 border rounded-lg"
        >
          Cancel
        </button>

        <PrimaryButton onClick={() => formik.handleSubmit()}>
          {initialData ? 'Update' : 'Create'}
        </PrimaryButton>

      </div>

    </div>
  );
}