'use client';

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

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

type LeadFormValues = {
  name: string;
  mobile: string;
  lead_score: string;
  email: string;
  gender: string;
  birthDate: Date | null;
  source: { label: string; value: string } | null;
  skills: { label: string; value: string }[];
  address: string;
  pincode: string;
  assignedTo: { label: string; value: string } | null;
};

const sourceOptions = [
  { label: 'Website', value: 'Website' },
  { label: 'Facebook', value: 'Facebook' },
  { label: 'Instagram', value: 'Instagram' },
  { label: 'Referral', value: 'Referral' },
];

const staffOptions = [
  { label: 'Arun', value: 'Arun' },
  { label: 'Karthik', value: 'Karthik' },
  { label: 'Vijay', value: 'Vijay' },
];

const skillOptions = [
  { label: 'Budget', value: 'Budget' },
  { label: 'Premium', value: 'Premium' },
  { label: 'Hot', value: 'Hot' },
  { label: 'Cold', value: 'Cold' },
];

export default function LeadDrawer({
  onSubmit,
  initialData,
}: any) {
  const { closeDrawer } = useDrawer();

  const formik = useFormik<LeadFormValues>({
    enableReinitialize: true,
    initialValues: {
      name: initialData?.name || '',
      mobile: initialData?.mobile || '',
      lead_score: initialData?.lead_score || '',
      email: initialData?.email || '',
      gender: initialData?.gender || '',
      birthDate: initialData?.birthDate ? new Date(initialData.birthDate) : null,
      source: initialData?.source || null,
      skills:
        initialData?.tags?.map((t: string) => ({
          label: t,
          value: t,
        })) || [],
      address: initialData?.address || '',
      pincode: initialData?.pincode || '',
      assignedTo: initialData?.assignedTo || null,
    },

    validationSchema: Yup.object({
      name: Yup.string().required('Lead name is required'),
      mobile: Yup.string()
        .required('Mobile is required')
        .matches(/^[0-9]{10}$/, 'Enter valid 10-digit mobile'),
      source: Yup.object().nullable().required('Lead source is required'),
      skills: Yup.array().min(1, 'Select at least one tag'),
    }),

    onSubmit: (values, { resetForm }) => {
      onSubmit({
        ...values,
        id: initialData?.id,
        source: values.source?.value,
        assignedTo: values.assignedTo?.value,
        tags: values.skills.map((s) => s.value),
      });

      resetForm();
      closeDrawer();
    },
  });

  return (
    <div className="flex flex-col h-full bg-white">

      {/* HEADER */}
      <div className="flex items-center justify-between border-b px-6 py-4 shrink-0">
        <h2 className="text-lg font-semibold">
          {initialData ? 'Edit Lead' : 'Create Lead'}
        </h2>

        <button
          onClick={closeDrawer}
          className="text-gray-500 hover:text-black text-xl"
        >
          ✕
        </button>
      </div>

      {/* SCROLLABLE BODY */}
      <div className="flex-1 overflow-y-auto px-6 py-4">

        <form onSubmit={formik.handleSubmit} className="space-y-6">

          {/* NAME */}
          <div>
            <label className="text-sm font-medium">Lead Name</label>
            <input
              name="name"
              className="w-full border rounded-lg px-4 py-2 mt-1"
              value={formik.values.name}
              onChange={formik.handleChange}
            />
          </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}
              />
            </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}
              />
            </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 + SCORE */}
          <div className="grid grid-cols-2 gap-3">

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

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

          </div>

          {/* SOURCE */}
          <div>
            <label className="text-sm font-medium">Lead Source</label>
            <Select
              options={sourceOptions}
              value={formik.values.source}
              onChange={(v) => formik.setFieldValue('source', v)}
            />
          </div>

          {/* ASSIGN */}
          <div>
            <label className="text-sm font-medium">Assign To</label>
            <Select
              options={staffOptions}
              value={formik.values.assignedTo}
              onChange={(v) => formik.setFieldValue('assignedTo', v)}
            />
          </div>

          {/* TAGS */}
          <div>
            <label className="text-sm font-medium">Tags</label>
            <Select
              isMulti
              options={skillOptions}
              value={formik.values.skills}
              onChange={(v) => formik.setFieldValue('skills', v)}
            />
          </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>
  );
}