'use client';

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

import PrimaryButton from '@/components/common/primary-button';
import { useDrawer } from '../../common/Drawer';
import { PiPlus, PiTrash } from 'react-icons/pi';

type ProjectFormValues = {
  name: string;
  location: string;
  status: { label: string; value: string } | null;
};

const statusOptions = [
  { label: 'Under Construction', value: 'Under Construction' },
  { label: 'Planning', value: 'Planning' },
  { label: 'Completed', value: 'Completed' },
];

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

    const [towerInput, setTowerInput] = useState('');
    const [towers, setTowers] = useState<string[]>([]);

    const formik = useFormik<ProjectFormValues>({
        enableReinitialize: true,
        initialValues: {
        name: initialData?.name || '',
        location: initialData?.location || '',
        status: initialData
            ? { label: initialData.status, value: initialData.status }
            : null,
        },

        validationSchema: Yup.object({
        name: Yup.string().required('Project name is required'),
        location: Yup.string().required('Location is required'),
        status: Yup.object().required('Status is required'),
        }),

        onSubmit: (values) => {
        onSubmit({
            name: values.name,
            location: values.location,
            status: values.status?.value,
            towers: towers.filter(t => t.trim() !== ''),
        });

        closeDrawer();
        },
    });

    // ➕ Add tower
    const addTower = () => {
        if (!towerInput.trim()) return;

        setTowers([...towers, towerInput.trim()]);
        setTowerInput('');
    };

    // ❌ Remove tower
    const removeTower = (index: number) => {
        setTowers(towers.filter((_, i) => i !== index));
    };

  // ✏️ Update tower
  const updateTower = (value: string, index: number) => {
    const updated = [...towers];
    updated[index] = value;
    setTowers(updated);
  };

  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 Project' : 'Create Project'}
        </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">

          {/* Project Name */}
          <div>
            <label className="text-sm font-medium">Project Name</label>
            <input
              name="name"
              className="w-full border rounded-lg px-4 py-2 mt-1"
              value={formik.values.name}
              onChange={formik.handleChange}
            />
            {formik.touched.name && formik.errors.name && (
              <p className="text-red-500 text-xs mt-1">{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}
            />
          </div>

          {/* Status */}
          <div>
            <label className="text-sm font-medium">Status</label>
            <Select
              options={statusOptions}
              value={formik.values.status}
              onChange={(val) => formik.setFieldValue('status', val)}
            />
          </div>

          <div>
            <label className="text-xs font-semibold text-gray-500 mb-1 block">
                TOWERS / BLOCKS
            </label>

            {/* Input + Add Button */}
            <div className="flex items-center gap-2">
                <input
                value={towerInput}
                onChange={(e) => setTowerInput(e.target.value)}
                placeholder="Add Tower"
                className="flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                    e.preventDefault();
                    addTower();
                    }
                }}
                />

                <button
                type="button"
                onClick={addTower}
                className="w-9 h-9 flex items-center justify-center rounded-lg bg-gray-100 hover:bg-gray-200"
                >
                <PiPlus size={16} />
                </button>
            </div>

            {/* Chips */}
            <div className="flex flex-wrap gap-2 mt-3">
                {towers.map((tower, index) => (
                <div
                    key={index}
                    className="flex items-center gap-1 bg-blue-50 text-blue-600 text-xs px-2.5 py-1 rounded-md"
                >
                    {tower}
                    <button
                    type="button"
                    onClick={() => removeTower(index)}
                    className="text-blue-500 hover:text-red-500"
                    >
                    ×
                    </button>
                </div>
                ))}
            </div>
            </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>
  );
}