'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>
  );
}