'use client';

import { ReactNode } from 'react';
import { DailyCheckbox, DailyCheckboxType } from '@/lib/types';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { DailyCheckboxSortable } from './DailyCheckboxSortable';
import { CheckboxItem, CheckboxItemData } from '@/components/ui/CheckboxItem';
import { DailyAddForm, AddFormOption } from '@/components/ui/DailyAddForm';
import { CheckSquare2, Calendar } from 'lucide-react';
import {
  DndContext,
  closestCenter,
  DragEndEvent,
  DragOverlay,
  DragStartEvent,
} from '@dnd-kit/core';
import {
  SortableContext,
  verticalListSortingStrategy,
  arrayMove,
} from '@dnd-kit/sortable';
import { useState } from 'react';
import React from 'react';

interface DailySectionProps {
  title: ReactNode;
  date: Date;
  checkboxes: DailyCheckbox[];
  onAddCheckbox: (text: string, type: DailyCheckboxType) => Promise<void>;
  onToggleCheckbox: (checkboxId: string) => Promise<void>;
  onUpdateCheckbox: (
    checkboxId: string,
    text: string,
    type: DailyCheckboxType,
    taskId?: string,
    date?: Date
  ) => Promise<void>;
  onDeleteCheckbox: (checkboxId: string) => Promise<void>;
  onReorderCheckboxes: (date: Date, checkboxIds: string[]) => Promise<void>;
  onToggleAll?: () => Promise<void>;
  saving: boolean;
  refreshing?: boolean;
}

export function DailySection({
  title,
  date,
  checkboxes,
  onAddCheckbox,
  onToggleCheckbox,
  onUpdateCheckbox,
  onDeleteCheckbox,
  onReorderCheckboxes,
  onToggleAll,
  saving,
  refreshing = false,
}: DailySectionProps) {
  const [activeId, setActiveId] = useState<string | null>(null);
  const [items, setItems] = useState(checkboxes);

  // Mettre à jour les items quand les checkboxes changent
  React.useEffect(() => {
    setItems(checkboxes);
  }, [checkboxes]);

  const handleDragStart = (event: DragStartEvent) => {
    setActiveId(event.active.id as string);
  };

  const handleDragEnd = async (event: DragEndEvent) => {
    const { active, over } = event;
    setActiveId(null);

    if (!over || active.id === over.id) {
      return;
    }

    const oldIndex = items.findIndex((item) => item.id === active.id);
    const newIndex = items.findIndex((item) => item.id === over.id);

    if (oldIndex !== -1 && newIndex !== -1) {
      // Mise à jour optimiste
      const newItems = arrayMove(items, oldIndex, newIndex);
      setItems(newItems);

      // Envoyer l'ordre au serveur
      const checkboxIds = newItems.map((item) => item.id);
      try {
        await onReorderCheckboxes(date, checkboxIds);
      } catch (error) {
        // Rollback en cas d'erreur
        setItems(checkboxes);
        console.error('Erreur lors du réordonnancement:', error);
      }
    }
  };

  const activeCheckbox = activeId
    ? items.find((item) => item.id === activeId)
    : null;

  // Options pour le formulaire d'ajout
  const addFormOptions: AddFormOption[] = [
    {
      value: 'meeting',
      label: 'Réunion',
      icon: <Calendar size={14} />,
      color: 'blue',
    },
    {
      value: 'task',
      label: 'Tâche',
      icon: <CheckSquare2 size={14} />,
      color: 'green',
    },
  ];

  // Convertir les checkboxes en format CheckboxItemData
  const convertToCheckboxItemData = (
    checkbox: DailyCheckbox
  ): CheckboxItemData => ({
    id: checkbox.id,
    text: checkbox.text,
    isChecked: checkbox.isChecked,
    type: checkbox.type,
    taskId: checkbox.taskId,
    task: checkbox.task,
    isArchived: checkbox.isArchived,
  });

  return (
    <DndContext
      collisionDetection={closestCenter}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      id={`daily-dnd-${String(title).replace(/[^a-zA-Z0-9]/g, '-')}`}
    >
      <Card variant="glass" className="p-0 flex flex-col h-[80vh] sm:h-[600px]">
        {/* Header */}
        <div className="p-4 pb-0">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-bold text-[var(--foreground)] font-mono flex items-center gap-2">
              {title}{' '}
              <span className="text-sm font-normal text-[var(--muted-foreground)]"></span>
              {refreshing && (
                <div className="w-4 h-4 border-2 border-[var(--primary)] border-t-transparent rounded-full animate-spin"></div>
              )}
            </h2>
            <div className="flex items-center gap-2">
              <span className="text-xs text-[var(--muted-foreground)] font-mono">
                {checkboxes.filter((cb) => cb.isChecked).length}/
                {checkboxes.length}
              </span>
              {onToggleAll && checkboxes.length > 0 && (
                <Button
                  type="button"
                  onClick={onToggleAll}
                  variant="ghost"
                  size="sm"
                  disabled={saving}
                  className="text-xs px-2 py-1 h-6"
                  title="Tout cocher/décocher"
                >
                  ✓
                </Button>
              )}
            </div>
          </div>
        </div>

        {/* Liste des checkboxes - zone scrollable avec drag & drop */}
        <div className="flex-1 px-4 overflow-y-auto min-h-0">
          <SortableContext
            items={items.map((item) => item.id)}
            strategy={verticalListSortingStrategy}
          >
            <div className="space-y-1.5 pb-4">
              {items.map((checkbox) => (
                <DailyCheckboxSortable
                  key={checkbox.id}
                  checkbox={checkbox}
                  onToggle={onToggleCheckbox}
                  onUpdate={onUpdateCheckbox}
                  onDelete={onDeleteCheckbox}
                  saving={saving}
                />
              ))}

              {items.length === 0 && (
                <div className="text-center py-8 text-[var(--muted-foreground)] text-sm font-mono">
                  Aucune tâche pour cette période
                </div>
              )}
            </div>
          </SortableContext>
        </div>

        {/* Footer - Formulaire d'ajout toujours en bas */}
        <div className="p-4 pt-2 border-t border-[var(--border)]/30 bg-[var(--card)]/50">
          <DailyAddForm
            onAdd={(text, option) =>
              onAddCheckbox(text, option as DailyCheckboxType)
            }
            disabled={saving}
            placeholder="Ajouter une tâche..."
            options={addFormOptions}
            defaultOption="meeting"
          />
        </div>
      </Card>

      <DragOverlay
        dropAnimation={null}
        style={{
          transformOrigin: '0 0',
        }}
      >
        {activeCheckbox ? (
          <div className="bg-[var(--card)] border border-[var(--border)] rounded-md shadow-xl opacity-95 transform rotate-3 scale-105">
            <div className="pl-4">
              <CheckboxItem
                item={convertToCheckboxItemData(activeCheckbox)}
                onToggle={() => Promise.resolve()}
                onUpdate={() => Promise.resolve()}
                onDelete={() => Promise.resolve()}
                saving={false}
                showEditButton={false}
                showDeleteButton={false}
              />
            </div>
          </div>
        ) : null}
      </DragOverlay>
    </DndContext>
  );
}
