'use client';

import { useState } from 'react';
import { CheckSquare2, Calendar, Circle } from 'lucide-react';
import { Input } from '@/components/ui/Input';
import { SearchInput } from '@/components/ui/SearchInput';
import { TagInput } from '@/components/ui/TagInput';
import { DateTimeInput } from '@/components/ui/DateTimeInput';
import { FormField } from '@/components/ui/FormField';
import { PrioritySelector } from '@/components/ui/PrioritySelector';
import { DailyAddForm } from '@/components/ui/DailyAddForm';
import { CheckboxItem, CheckboxItemData } from '@/components/ui/CheckboxItem';

export function FormsSection() {
  const [inputValue, setInputValue] = useState('');
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [checkboxItems, setCheckboxItems] = useState<CheckboxItemData[]>([
    { id: '1', text: 'Tâche complétée', isChecked: true, type: 'task' },
    { id: '2', text: 'Réunion importante', isChecked: false, type: 'meeting' },
    { id: '3', text: 'Tâche en cours', isChecked: false, type: 'task' },
  ]);

  const handleToggleCheckbox = (id: string) => {
    setCheckboxItems((prev) =>
      prev.map((item) =>
        item.id === id ? { ...item, isChecked: !item.isChecked } : item
      )
    );
  };

  const handleUpdateCheckbox = (id: string, text: string) => {
    setCheckboxItems((prev) =>
      prev.map((item) => (item.id === id ? { ...item, text } : item))
    );
  };

  return (
    <section id="forms" className="space-y-8">
      <h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
        Forms & Inputs
      </h2>

      <div className="space-y-8">
        {/* Basic Inputs */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Basic Inputs
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-4">
              <Input
                placeholder="Enter text..."
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
              />
              <Input placeholder="Disabled input" disabled />
              <Input
                placeholder="With error"
                className="border-[var(--destructive)]"
              />
            </div>
            <div className="space-y-4">
              <SearchInput placeholder="Search tasks..." />
              <SearchInput placeholder="Search with filters..." />
            </div>
          </div>
        </div>

        {/* Form Fields */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Form Fields
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <FormField
              placeholder="Enter task title..."
              value={inputValue}
              onChange={(e) => setInputValue(e)}
            />
            <FormField
              placeholder="Enter description..."
              value=""
              onChange={() => {}}
            />
            <div className="space-y-2">
              <label className="text-sm font-medium text-[var(--foreground)]">
                Priority
              </label>
              <PrioritySelector
                value="medium"
                onChange={(priority) => console.log('Priority:', priority)}
              />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium text-[var(--foreground)]">
                Due Date
              </label>
              <DateTimeInput
                value={selectedDate}
                onChange={(date) => date && setSelectedDate(date)}
              />
            </div>
          </div>
        </div>

        {/* Tag Input */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Tag Input
          </h3>
          <TagInput placeholder="Add tags..." tags={[]} onChange={() => {}} />
        </div>

        {/* Checkbox Items */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Checkbox Items
          </h3>
          <div className="space-y-2">
            {checkboxItems.map((item) => (
              <CheckboxItem
                key={item.id}
                item={item}
                onToggle={async () => handleToggleCheckbox(item.id)}
                onUpdate={async (text) => handleUpdateCheckbox(item.id, text)}
                onDelete={async () => {
                  setCheckboxItems((prev) =>
                    prev.filter((i) => i.id !== item.id)
                  );
                }}
              />
            ))}
          </div>
        </div>

        {/* Daily Add Form */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Daily Add Form
          </h3>
          <DailyAddForm
            placeholder="Add new daily item..."
            onAdd={async (text, option) =>
              console.log('Add item:', text, option)
            }
            options={[
              {
                value: 'task',
                label: 'Task',
                icon: <CheckSquare2 size={14} />,
                color: 'green',
              },
              {
                value: 'meeting',
                label: 'Meeting',
                icon: <Calendar size={14} />,
                color: 'blue',
              },
              {
                value: 'event',
                label: 'Event',
                icon: <Circle size={14} />,
                color: 'gray',
              },
            ]}
          />
        </div>
      </div>
    </section>
  );
}
