// frontend/src/components/Schedule/ScheduleView.tsx

import { Search } from 'lucide-react';
import { useState } from 'react';
import { type MatchData } from '../../types';
import ScheduleRow from './ScheduleRow';

interface ScheduleViewProps {
    schedule: MatchData[];
    onMatchClick: (match: MatchData) => void;
}

export default function ScheduleView({ schedule, onMatchClick }: ScheduleViewProps) {
    const [filter, setFilter] = useState<string>("");

    const longestCourt = schedule.reduce((max, m) => {
        const c = m.court || "Court";
        return c.length > max.length ? c : max;
    }, "Court");

    const badgeWidth = Math.max(80, longestCourt.length * 10);

    const filteredAndSorted = schedule
        .filter(m => (m.p1 + m.p2 + m.number + `Match #${m.number}` + m.ref_label).toLowerCase().includes(filter.toLowerCase()))
        .sort((a, b) => {
            const timeA = a.start_time || a.timestamp || a.time || "";
            const timeB = b.start_time || b.timestamp || b.time || "";
            if (timeA !== timeB) return timeA.localeCompare(timeB);
            const courtA = a.court || "";
            const courtB = b.court || "";
            return courtA.localeCompare(courtB);
        });

    return (
        <div className="h-full overflow-hidden print:overflow-visible print:h-auto print:block relative flex flex-col">
            <style>
                {`@media print { 
                    @page { size: portrait; margin: 1cm; }
                    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: white !important; }
                }`}
            </style>

            <div className="absolute top-0 inset-x-0 z-30 p-6 pb-2 bg-transparent pointer-events-none print:hidden">
                <div className="relative group max-w-3xl mx-auto w-full pointer-events-auto">
                    <input
                        placeholder="Search matches..."
                        className="w-full bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-800 rounded-2xl p-4 pl-12 focus:ring-2 focus:ring-orange-500 outline-none transition shadow-sm text-zinc-900 dark:text-white font-bold"
                        value={filter}
                        onChange={e => setFilter(e.target.value)}
                    />
                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-400" size={20} />
                </div>
            </div>

            <div className="transition-colors absolute top-0 left-0 right-3 h-32 bg-linear-to-b from-zinc-50 via-zinc-50/95 to-transparent dark:from-zinc-950 dark:via-zinc-950/95 dark:to-transparent pointer-events-none z-20 print:hidden" />

            <div className="flex-1 overflow-y-auto print:overflow-visible p-6 pt-28 pb-32 print:p-0 print:pt-12 relative z-10">
                <div className="max-w-4xl mx-auto w-full space-y-3 print:space-y-0">

                    <div className="hidden print:block text-2xl font-black mb-6 text-black uppercase tracking-widest border-b-2 border-black pb-2">
                        Tournament Schedule
                    </div>

                    {filteredAndSorted.map(m => (
                        <ScheduleRow
                            key={m.id}
                            match={m}
                            onMatchClick={onMatchClick}
                            badgeWidth={badgeWidth}
                        />
                    ))}

                </div>
            </div>
        </div>
    );
}