'use client';

import { useState, useEffect, useMemo } from 'react';
import { format, parseISO } from 'date-fns';

import { SubstitutionData, ChangeEntry } from '@/lib/types';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Label } from '@/components/ui/label';
import TakesPlace from '@/components/own/takes-place';
import { TeacherAbsenceItem } from '@/components/own/teacher-absence';
import UpdateStatus from '@/components/own/update-status';

interface SubstitutionViewerProps {
  initialData: SubstitutionData | null;
}

export default function SubstitutionViewer({ initialData }: SubstitutionViewerProps) {
  const data = initialData;
  
  const [selectedDate, setSelectedDate] = useState<string>('');

  useEffect(() => {
    if (data?.schedule) {
      const dates = Object.keys(data.schedule).sort();
      if (dates.length > 0) {
        if (!selectedDate || !data.schedule[selectedDate]) {
          setSelectedDate(dates[0]);
        }
      }
    }
  }, [data, selectedDate]);

  const currentDayData = data?.schedule?.[selectedDate];

  const dates = data ? Object.keys(data.schedule).sort() : [];

  if (!data) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen text-muted-foreground space-y-4">
        <p>Nepodařilo se načíst data.</p>
        <Button onClick={() => window.location.reload()}>Zkusit znovu</Button>
      </div>
    );
  }

  return (

      <main className="flex-1 w-full max-w-[1920px] mx-auto p-4 md:p-6 space-y-6">
        <UpdateStatus data={data} />

        <div className="max-w-md">
          <Label htmlFor="date-select" className="mb-2 block">Datum</Label>
          <Select value={selectedDate} onValueChange={setSelectedDate}>
            <SelectTrigger id="date-select" className="w-full">
              <SelectValue placeholder="Vyberte datum" />
            </SelectTrigger>
            <SelectContent>
              {dates.map((date) => {
                const info = data.schedule[date];
                const label = format(parseISO(date), 'd.M.yyyy');
                const suffix = info.info.inWork ? ' (příprava)' : ''; 
                return (
                  <SelectItem key={date} value={date}>
                    {label}{suffix}
                  </SelectItem>
                );
              })}
            </SelectContent>
          </Select>
        </div>

        {currentDayData ? (
          <div className="grid grid-cols-1 xl:grid-cols-4 gap-6">
            <div className="xl:col-span-3 space-y-6">
              
              <div>
                <h2 className="text-xl font-semibold mb-3">Změny v rozvrhu</h2>
                <SubstitutionsTable changes={currentDayData.changes} />
              </div>

              <TakesPlace string={currentDayData.takesPlace} />
            </div>

            <div className="xl:col-span-1 space-y-6">
              <div>
                <h2 className="text-xl font-semibold mb-3 text-slate-900 dark:text-slate-100">Absence učitelů</h2>
                {currentDayData.absence.length > 0 ? (
                  <div className="space-y-3">
                    {currentDayData.absence.map((entry, idx) => (
                      <TeacherAbsenceItem key={idx} entry={entry} />
                    ))}
                  </div>
                ) : (
                  <div className="p-4 rounded-lg border border-dashed text-muted-foreground text-center bg-slate-50 dark:bg-slate-900/50">
                    Žádní učitelé nemají absenci
                  </div>
                )}
              </div>
            </div>
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
            <p className="text-lg">Pro vybrané datum nejsou k dispozici žádná data.</p>
          </div>
        )}
      </main>
  );
}

function SubstitutionsTable({ changes }: { changes: Record<string, (ChangeEntry | null)[]> }) {
  const sortedClasses = useMemo(() => {
    return Object.keys(changes).sort((a, b) => {
      const regex = /^([A-Z]+)(\d+)([a-z]*)$/;
      const ma = a.match(regex);
      const mb = b.match(regex);

      if (ma && mb) {
          const [, pa, na, sa] = ma;
          const [, pb, nb, sb] = mb;

          const numDiff = parseInt(na) - parseInt(nb);
          if (numDiff !== 0) return numDiff;
          
          const prefixDiff = pa.localeCompare(pb);
          if (prefixDiff !== 0) return prefixDiff;

          return sa.localeCompare(sb);
      }

      return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
    });
  }, [changes]);

  const maxHours = useMemo(() => {
    let max = 0;
    Object.values(changes).forEach(list => {
      if (list.length > max) max = list.length;
    });
    return max;
  }, [changes]);

  const hours = Array.from({ length: maxHours }, (_, i) => i + 1);

  return (
    <Card className="overflow-hidden border p-0">
      <div className="overflow-x-auto">
        <table className="w-full text-sm text-left border-collapse">
          <thead>
            <tr>
              <th className="p-3 font-semibold border-b border-r min-w-[80px] text-center sticky left-0 z-10">
                
              </th>
              {hours.map(h => (
                <th key={h} className="p-3 font-semibold border-b border-r min-w-[60px] text-center w-[60px]">
                  {h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {sortedClasses.map((className) => (
              <tr key={className} className="border-b last:border-0">
                <td className="p-2 font-bold border-r sticky left-0 z-10 bg-card text-center">
                  {className}
                </td>
                {hours.map((_, idx) => {
                  const change = changes[className][idx];
                  return (
                    <td key={idx} className="p-[2px] border-r w-[70px] h-[70px] align-middle">
                      {change ? (
                        <div 
                          className="w-full h-full min-h-[46px] flex items-center justify-center p-1 rounded-sm text-xs text-center truncate"
                          style={{
                            backgroundColor: change.backgroundColor || '#eee',
                            color: change.foregroundColor ? "#" +change.foregroundColor.substring(3, 6) : '#000'
                          }}
                          title={change.text}
                        >
                          {change.text}
                        </div>
                      ) : (
                        <div className="w-full h-full min-h-[46px]"></div>
                      )}
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Card>
  );
}