'use client';

import { DailyCheckbox, DailyCheckboxType } from '@/lib/types';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { DailyCheckboxItem } from './DailyCheckboxItem';
import { DailyAddForm } from './DailyAddForm';

interface DailySectionProps {
  title: string;
  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) => Promise<void>;
  onDeleteCheckbox: (checkboxId: string) => Promise<void>;
  onToggleAll?: () => Promise<void>;
  saving: boolean;
  refreshing?: boolean;
}

export function DailySection({ 
  title, 
  date,
  checkboxes, 
  onAddCheckbox, 
  onToggleCheckbox, 
  onUpdateCheckbox,
  onDeleteCheckbox,
  onToggleAll,
  saving,
  refreshing = false
}: DailySectionProps) {
  const formatShortDate = (date: Date) => {
    return date.toLocaleDateString('fr-FR', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric'
    });
  };

  return (
    <Card className="p-0 flex flex-col 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)]">({formatShortDate(date)})</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 */}
      <div className="flex-1 px-4 overflow-y-auto min-h-0">
        <div className="space-y-1.5 pb-4">
          {checkboxes.map((checkbox) => (
            <DailyCheckboxItem
              key={checkbox.id}
              checkbox={checkbox}
              onToggle={onToggleCheckbox}
              onUpdate={onUpdateCheckbox}
              onDelete={onDeleteCheckbox}
              saving={saving}
            />
          ))}

          {checkboxes.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>
      </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={onAddCheckbox}
          disabled={saving}
        />
      </div>
    </Card>
  );
}