'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 PrimaryButton from '@/components/common/primary-button';
import { useDrawer } from '../../common/Drawer';

type PropertyFormValues = {
  name: string;
  location: string;
  type: { label: string; value: string } | null;
  sqft: string;
  budget: string;
  amenities: { label: string; value: string }[];
  description: string;
  documents: File[];
};

const propertyTypeOptions = [
  { label: 'Plot', value: 'Plot' },
  { label: 'Land', value: 'Land' },
  { label: 'House', value: 'House' },
  { label: 'Apartment', value: 'Apartment' },
];

const amenitiesOptions = [
  { label: 'Water Supply', value: 'Water Supply' },
  { label: 'Electricity', value: 'Electricity' },
  { label: 'Road Access', value: 'Road Access' },
  { label: 'Drainage', value: 'Drainage' },
  { label: 'Parking', value: 'Parking' },
  { label: 'Garden', value: 'Garden' },
  { label: 'Security', value: 'Security' },
];

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

  const formik = useFormik<PropertyFormValues>({
    enableReinitialize: true,
    initialValues: {
      name: initialData?.name || '',
      location: initialData?.location || '',
      type: initialData?.type || null,
      sqft: initialData?.sqft || '',
      budget: initialData?.budget || '',
      amenities:
        initialData?.amenities?.map((a: any) =>
          typeof a === 'string' ? { label: a, value: a } : a
        ) || [],
      description: initialData?.description || '',
      documents: [],
    },

    validationSchema: Yup.object({
      name: Yup.string().required('Property name is required'),
      location: Yup.string().required('Location is required'),
      type: Yup.object().required('Property type is required'),
      sqft: Yup.number().required('Sq Ft is required'),
      budget: Yup.number().required('Budget 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">
      {/* HEADER */}
      <div className="flex items-center justify-between border-b px-6 py-4">
        <h2 className="text-lg font-semibold">
          {initialData ? 'Edit Property' : 'Create Property'}
        </h2>
        <button
          onClick={closeDrawer}
          className="text-gray-500 hover:text-black text-xl"
        >
          ✕
        </button>
      </div>

      {/* BODY */}
      <div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
        <form onSubmit={formik.handleSubmit} className="space-y-6">

          {/* NAME */}
          <div>
            <label className="text-sm font-medium">Property 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>

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

          {/* TYPE */}
          <div>
            <label className="text-sm font-medium">Property Type</label>
            <Select
              options={propertyTypeOptions}
              value={formik.values.type}
              onChange={(value) =>
                formik.setFieldValue('type', value)
              }
            />
          </div>

          {/* SQFT + BUDGET */}
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-sm font-medium">Sq Ft</label>
              <input
                name="sqft"
                type="number"
                className="w-full border rounded-lg px-4 py-2 mt-1"
                value={formik.values.sqft}
                onChange={formik.handleChange}
              />
            </div>

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

          {/* AMENITIES */}
          <div>
            <label className="text-sm font-medium">Amenities</label>
            <Select
              isMulti
              options={amenitiesOptions}
              value={formik.values.amenities}
              onChange={(value) =>
                formik.setFieldValue('amenities', value)
              }
            />
          </div>

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

          {/* DOCUMENTS */}
          <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>

        </form>
      </div>

      {/* FOOTER */}
      <div className="border-t px-6 py-4 flex justify-end gap-2">
        <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>
  );
}