import React, { useMemo, useRef, useState, useEffect } from 'react';
import { slugify, sortByDrawOrder } from '@/lib/loto-data';
import { router, usePage } from '@inertiajs/react';
import { CalendarDays, Maximize, Minimize, FileDown, ChevronLeft, ChevronRight } from 'lucide-react';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

interface WeeklyDrawsProps {
  weeklyDraws: any[];
  currentWeekDate?: string;
}

export function WeeklyDraws({ weeklyDraws, currentWeekDate }: WeeklyDrawsProps) {
  const navigate = (url: string) => router.visit(url);
  const { drawNames } = usePage().props as any;
  const names = drawNames || [];
  
  const containerRef = useRef<HTMLDivElement>(null);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [collapsedCols, setCollapsedCols] = useState<Record<number, boolean>>({});

  const toggleColumn = (idx: number) => {
    setCollapsedCols(prev => ({ ...prev, [idx]: !prev[idx] }));
  };

  // Lundi au Dimanche
  const daysOfWeek = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];

  const columns = useMemo(() => {
    const cols = daysOfWeek.map(name => ({ name, date: '', draws: [] as any[] }));

    const referenceDate = currentWeekDate ? new Date(currentWeekDate) : new Date();
    let currentDay = referenceDate.getDay();
    if (currentDay === 0) currentDay = 7;
    
    const startOfWeekDate = new Date(referenceDate);
    startOfWeekDate.setDate(referenceDate.getDate() - currentDay + 1);

    cols.forEach((col, index) => {
      const colDate = new Date(startOfWeekDate);
      colDate.setDate(startOfWeekDate.getDate() + index);
      col.date = colDate.toLocaleDateString('fr-FR', { day: '2-digit', month: 'short' });
    });

    (weeklyDraws || []).forEach(draw => {
      const drawDate = draw.draw_date ? new Date(draw.draw_date) : new Date(draw.date);
      let dayIndex = drawDate.getDay();
      if (dayIndex === 0) dayIndex = 7;
      
      cols[dayIndex - 1].draws.push(draw);
    });

    cols.forEach(col => {
      col.draws = sortByDrawOrder(col.draws, (d: any) => d.name);
    });

    return cols;
  }, [weeklyDraws, names, currentWeekDate]);

  let todayIndex = currentWeekDate ? new Date(currentWeekDate).getDay() : new Date().getDay();
  if (todayIndex === 0) todayIndex = 7;
  todayIndex -= 1; // 0 for Monday, 6 for Sunday

  const startDateStr = columns[0]?.date || "";
  const endDateStr = columns[6]?.date || "";

  useEffect(() => {
    const handleFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
  }, []);

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      containerRef.current?.requestFullscreen().catch(err => {
        console.error(`Erreur plein écran: ${err.message}`);
      });
    } else {
      document.exitFullscreen();
    }
  };

  const exportPDF = () => {
    const doc = new jsPDF('l', 'mm', 'a4'); // 'l' pour landscape
    
    doc.setFontSize(16);
    doc.text("Tous les tirages de la semaine", 14, 15);
    doc.setFontSize(10);
    doc.setTextColor(100);
    doc.text(`Du Lundi ${startDateStr} au Dimanche ${endDateStr}`, 14, 22);

    const head = [columns.map(col => `${col.name}\n${col.date}`)];
    const maxDraws = Math.max(...columns.map(col => col.draws.length), 1);
    const body: any[] = [];

    for (let rowIndex = 0; rowIndex < maxDraws; rowIndex++) {
      const row: string[] = [];
      for (let colIndex = 0; colIndex < columns.length; colIndex++) {
        const draw = columns[colIndex].draws[rowIndex];
        if (draw) {
          const winningNumbers = Array.isArray(draw.first) ? draw.first : (draw.winning_numbers || draw.numbers || []);
          const machineNumbers = Array.isArray(draw.second) ? draw.second : (draw.machine_numbers || []);
          
          let cellText = draw.name.toUpperCase();
          if (winningNumbers.length > 0) {
            cellText += `\nWin: ${winningNumbers.slice(0, 5).join('-')}`;
          }
          if (machineNumbers && machineNumbers.length > 0) {
            cellText += `\nMac: ${machineNumbers.slice(0, 5).join('-')}`;
          }
          row.push(cellText);
        } else {
          row.push(''); // Empty cell
        }
      }
      body.push(row);
    }

    autoTable(doc, {
      startY: 28,
      head: head,
      body: body,
      theme: 'grid',
      headStyles: { fillColor: [22, 163, 74], halign: 'center' }, // green
      styles: { fontSize: 8, cellPadding: 2, halign: 'center', valign: 'middle' },
    });

    doc.save(`tirages_semaine_${startDateStr.replace(/\s/g, '_')}.pdf`);
  };

  return (
    <div 
      ref={containerRef} 
      className={`overflow-hidden rounded-xl border border-border/50 bg-card shadow-[var(--shadow-card)] mt-6 flex flex-col ${isFullscreen ? 'h-screen w-screen rounded-none border-none mt-0' : ''}`}
    >
      <div className="border-b border-border/50 px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl gradient-green text-secondary-foreground">
            <CalendarDays className="h-5 w-5" />
          </div>
          <div>
            <h3 className="font-display text-lg font-bold">Tous les tirages de la semaine</h3>
            <p className="text-sm text-muted-foreground">Du Lundi {startDateStr} au Dimanche {endDateStr}</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <input 
            type="date" 
            value={currentWeekDate || new Date().toISOString().split('T')[0]}
            onChange={(e) => {
              router.get('/', { date: e.target.value }, { preserveState: true, preserveScroll: true });
            }}
            className="flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-1.5 text-sm font-medium transition-colors hover:bg-muted outline-none h-9 text-slate-700"
            title="Choisir une date pour voir les tirages de cette semaine"
          />
          <button 
            onClick={exportPDF}
            className="flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-1.5 text-sm font-medium transition-colors hover:bg-muted"
          >
            <FileDown className="h-4 w-4" />
            <span className="hidden sm:inline">PDF</span>
          </button>
          <button 
            onClick={toggleFullscreen}
            className="flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-background transition-colors hover:bg-muted"
            title="Agrandir"
          >
            {isFullscreen ? <Minimize className="h-4 w-4" /> : <Maximize className="h-4 w-4" />}
          </button>
        </div>
      </div>
      
      <div className="overflow-x-auto p-4 custom-scrollbar flex-1">
        <div className="flex gap-4 min-w-max pb-2 h-full">
          {columns.map((col, idx) => {
            const isCollapsed = collapsedCols[idx];

            return (
            <div key={col.name} className={`transition-all duration-300 flex flex-col gap-3 shrink-0 ${isCollapsed ? 'w-14' : 'flex-1 w-[220px] max-w-[250px]'}`}>
              {/* Column Header */}
              <div className={`p-3 rounded-xl border font-medium flex items-center shadow-sm shrink-0 transition-colors h-[68px]
                ${idx === todayIndex 
                  ? 'bg-primary/10 border-primary/30 text-primary' 
                  : 'bg-muted/30 border-border/50'}
                ${isCollapsed ? 'justify-center cursor-pointer hover:bg-muted/50' : 'justify-between'}`}
                onClick={isCollapsed ? () => toggleColumn(idx) : undefined}
                title={isCollapsed ? "Afficher" : undefined}
              >
                {!isCollapsed ? (
                  <>
                    <div className="flex flex-col">
                      <span>{col.name}</span>
                      <span className="text-xs opacity-70">{col.date}</span>
                    </div>
                    <button 
                      onClick={(e) => { e.stopPropagation(); toggleColumn(idx); }}
                      className="flex items-center text-muted-foreground hover:text-foreground opacity-40 hover:opacity-100 transition-opacity p-1 -mr-1"
                      title="Réduire"
                    >
                      <ChevronRight className="w-4 h-4 -mr-1.5" /><ChevronLeft className="w-4 h-4" />
                    </button>
                  </>
                ) : (
                  <button className="flex items-center text-muted-foreground hover:text-foreground opacity-60">
                    <ChevronLeft className="w-4 h-4 -mr-1.5" /><ChevronRight className="w-4 h-4" />
                  </button>
                )}
              </div>
              
              {/* Draws Content */}
              {!isCollapsed && (
                <div className={`flex flex-col gap-2 ${isFullscreen ? 'overflow-y-auto pr-1' : ''}`}>
                  {col.draws.length === 0 ? (
                    <div className="text-center py-8 text-muted-foreground text-xs border border-dashed border-border/60 rounded-xl bg-muted/10">
                      Aucun tirage
                    </div>
                  ) : (
                    col.draws.map(draw => {
                      const winningNumbers = Array.isArray(draw.first) ? draw.first : (draw.winning_numbers || draw.numbers || []);
                      const machineNumbers = Array.isArray(draw.second) ? draw.second : (draw.machine_numbers || []);
                      
                      return (
                        <div 
                          key={draw.id} 
                          className="p-3 rounded-xl border border-border/60 bg-background shadow-sm hover:border-primary/40 cursor-pointer transition-colors shrink-0"
                          onClick={() => {
                            if (isFullscreen) document.exitFullscreen();
                            navigate(`/loto/${slugify(draw.name)}`);
                          }}
                        >
                          <div className="font-display font-semibold text-sm mb-2 text-foreground truncate">{draw.name}</div>
                          <div className="space-y-1.5">
                            <div className="flex flex-wrap gap-1.5">
                              {winningNumbers.slice(0, 5).map((n: number, nIdx: number) => (
                                <div key={`win-${draw.id}-${n}-${nIdx}`} className="flex h-7 w-7 items-center justify-center rounded-full gradient-orange text-[11px] font-bold text-primary-foreground shadow-sm">
                                  {String(n).padStart(2, '0')}
                                </div>
                              ))}
                            </div>
                            {machineNumbers && machineNumbers.length > 0 && (
                              <div className="flex flex-wrap gap-1.5">
                                {machineNumbers.slice(0, 5).map((n: number, nIdx: number) => (
                                  <div key={`mac-${draw.id}-${n}-${nIdx}`} className="flex h-7 w-7 items-center justify-center rounded-full gradient-green text-[11px] font-bold text-secondary-foreground shadow-sm">
                                    {String(n).padStart(2, '0')}
                                  </div>
                                ))}
                              </div>
                            )}
                          </div>
                        </div>
                      );
                    })
                  )}
                </div>
              )}
            </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}