import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import eg from "@/assets/eg.png";
import { BoothCalendar } from "@/components/booth/Calendar";
import { BookingDialog } from "@/components/booth/BookingDialog";
import { LangToggle } from "@/components/booth/LangToggle";
import { useI18n } from "@/lib/i18n";
import { useAuth } from "@/lib/auth";
import { Button } from "@/components/ui/button";
import { LayoutDashboard, LogOut } from "lucide-react";
import { supabase } from "@/integrations/supabase/client";
import type { Period } from "@/lib/booth-utils";

export const Route = createFileRoute("/")({ component: Index });

function Index() {
  const { t } = useI18n();
  const { isAdmin, session } = useAuth();
  const [open, setOpen] = useState(false);
  const [date, setDate] = useState<Date | null>(null);
  const [period, setPeriod] = useState<Period | null>(null);

  const handleSlotClick = (d: Date, p: Period) => {
    setDate(d);
    setPeriod(p);
    setOpen(true);
  };

  return (
    <div className="relative min-h-screen">
      {/* Background */}
      <div
        className="fixed inset-0 -z-10 bg-cover bg-center"
        style={{ backgroundImage: `url(${bg})` }}
        aria-hidden
      />
      <div className="fixed inset-0 -z-10 bg-background/80 backdrop-blur-[2px]" aria-hidden />

      <header className="container mx-auto flex items-center justify-between py-5 px-4">
        <div className="flex items-center gap-2">
          <span className="font-display text-xl sm:text-2xl tracking-[0.25em] text-primary">ELEGANT</span>
          <span className="text-xs sm:text-sm text-muted-foreground tracking-widest">{t.brandSub}</span>
        </div>
        <div className="flex items-center gap-2">
          {session && isAdmin && (
            <Button asChild variant="secondary" size="sm" className="gap-1.5">
              <Link to="/dashboard">
                <LayoutDashboard className="h-4 w-4" />
                <span className="hidden sm:inline">{t.dashboard}</span>
              </Link>
            </Button>
          )}
          {session && (
            <Button variant="ghost" size="sm" onClick={() => supabase.auth.signOut()} className="gap-1.5">
              <LogOut className="h-4 w-4" />
              <span className="hidden sm:inline">{t.logout}</span>
            </Button>
          )}
          <LangToggle />
        </div>
      </header>

      <main className="container mx-auto px-4 pb-16">
        <section className="text-center max-w-2xl mx-auto pt-6 pb-10">
          <h1 className="font-display text-4xl sm:text-6xl text-primary tracking-wide">
            {t.brand}
          </h1>
          <div className="mx-auto my-3 h-px w-24 bg-primary/40" />
          <p className="text-base sm:text-lg text-muted-foreground">{t.tagline}</p>
          <p className="text-sm text-muted-foreground/80 mt-2">{t.selectSlot}</p>
        </section>

        <div className="max-w-5xl mx-auto">
          <BoothCalendar onSlotClick={handleSlotClick} />
        </div>
      </main>

      <BookingDialog open={open} onOpenChange={setOpen} date={date} period={period} />
    </div>
  );
}