import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useMemo, useState } from "react";
import logoRepublica from "@/assets/logo-republica.png";
import logoEqavet from "@/assets/logo-eqavet.png";
import logoPombal from "@/assets/logo-pombal.png";

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

const WEEKDAYS = [
  { key: "seg", label: "Segunda-feira", date: "04/05" },
  { key: "ter", label: "Terça-feira", date: "05/05" },
  { key: "qua", label: "Quarta-feira", date: "06/05" },
  { key: "qui", label: "Quinta-feira", date: "07/05" },
  { key: "sex", label: "Sexta-feira", date: "08/05" },
] as const;

const EMENTAS: Record<string, { sopa: string; principal: string; veg: string; sobremesa: string; bebida: string }> = {
  seg: { sopa: "Creme de legumes", principal: "Bacalhau à Brás", veg: "Lasanha de cogumelos", sobremesa: "Fruta da época", bebida: "Água ou sumo natural" },
  ter: { sopa: "Sopa de grão", principal: "Frango assado com arroz", veg: "Tofu salteado com legumes", sobremesa: "Iogurte", bebida: "Água ou sumo natural" },
  qua: { sopa: "Sopa de feijão", principal: "Carne de porco à alentejana", veg: "Hambúrguer vegetal com batata", sobremesa: "Gelatina", bebida: "Água ou sumo natural" },
  qui: { sopa: "Caldo verde", principal: "Massa à bolonhesa", veg: "Esparguete com legumes salteados", sobremesa: "Fruta da época", bebida: "Água ou sumo natural" },
  sex: { sopa: "Sopa de espinafres", principal: "Pescada cozida com batata", veg: "Caril de grão", sobremesa: "Mousse de chocolate", bebida: "Água ou sumo natural" },
};

const EVENTS = [
  { day: 4, title: "Reunião de Conselho de Turma 12ºA", color: "bg-sky-200 text-sky-900" },
  { day: 5, title: "Aula aberta de Programação", color: "bg-emerald-200 text-emerald-900" },
  { day: 6, title: "Exame Nacional de Português", color: "bg-rose-200 text-rose-900" },
  { day: 7, title: "Workshop de Robótica", color: "bg-amber-200 text-amber-900" },
  { day: 8, title: "Visita de estudo · Mosteiro de Batalha", color: "bg-violet-200 text-violet-900" },
  { day: 11, title: "Reunião de Pais e Encarregados", color: "bg-teal-200 text-teal-900" },
  { day: 14, title: "Torneio inter-turmas de futsal", color: "bg-orange-200 text-orange-900" },
];

function useNow() {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  return now;
}

function Dashboard() {
  const now = useNow();
  const [dayIdx, setDayIdx] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setDayIdx((i) => (i + 1) % WEEKDAYS.length), 6000);
    return () => clearInterval(id);
  }, []);

  const time = now.toLocaleTimeString("pt-PT", { hour: "2-digit", minute: "2-digit" });
  const dateLabel = useMemo(() =>
    now.toLocaleDateString("pt-PT", { weekday: "long", day: "numeric", month: "long", year: "numeric" }),
  [now]);

  return (
    <div className="h-screen w-screen flex bg-background text-foreground overflow-hidden">
      {/* Left brand bar */}
      <aside className="w-14 bg-brand text-brand-foreground flex flex-col items-center justify-center py-6 shrink-0">
        <div className="text-[11px] font-semibold tracking-[0.35em] [writing-mode:vertical-rl] rotate-180">
          ESCOLA SECUNDÁRIA DE POMBAL
        </div>
      </aside>

      {/* Main */}
      <main className="flex-1 flex flex-col p-5 gap-4 min-w-0">
        {/* Header */}
        <header className="flex items-center justify-between shrink-0">
          <div className="flex items-center gap-8">
            <div suppressHydrationWarning className="text-5xl font-bold tabular-nums text-primary">{time}</div>
            <div>
              <div suppressHydrationWarning className="text-sm text-muted-foreground capitalize">{dateLabel}</div>
            </div>
          </div>
          <div className="flex items-center gap-5">
            <img src={logoRepublica} alt="República Portuguesa" className="h-12 w-auto object-contain" />
            <img src={logoEqavet} alt="Selo de Conformidade EQAVET" className="h-12 w-auto object-contain" />
            <img src={logoPombal} alt="Agrupamento de Escolas de Pombal" className="h-12 w-auto object-contain" />
          </div>
        </header>

        <h1 className="text-3xl font-bold text-primary shrink-0">Temperatura Pombal</h1>

        {/* Top stats */}
        <section className="grid grid-cols-4 gap-4 shrink-0">
          <StatCard label="Temperatura" value="19" unit="°C" delta="+ 1°C" trend="up" color="text-info" />
          <StatCard label="Humidade" value="56" unit="%" delta="- 4%" trend="down" color="text-danger" />
          <StatCard label="Qualidade do ar" value="40" unit="AQI" delta="+ 20" trend="up" color="text-success" />
          <StatCard label="Direção do Vento" value="NO" unit="" delta="Noroeste" trend="flat" color="text-primary" big />
        </section>

        {/* Middle: Eventos + Ementas */}
        <section className="grid grid-cols-3 gap-4 flex-1 min-h-0">
          <EventosCard className="col-span-2" />
          <EmentaCard idx={dayIdx} />
        </section>

        {/* Climatização interior */}
        <section className="bg-card rounded-2xl border border-border p-4 shrink-0">
          <div className="flex items-center justify-between mb-3">
            <div>
              <h2 className="text-lg font-bold text-primary">Climatização Interior</h2>
              <p className="text-xs text-muted-foreground">Espaços comuns · Bar, Refeitório, Biblioteca, Sala de Estudo</p>
            </div>
            <div className="flex items-center gap-2 text-xs text-success font-semibold uppercase">
              <span className="size-2 rounded-full bg-success animate-pulse" /> Em direto
            </div>
          </div>
          <div className="grid grid-cols-4 gap-3">
            <RoomCard icon="☕" name="Bar" temp="22.5" hum="48%" co2="708" tempColor="text-warning" co2Color="text-warning" />
            <RoomCard icon="🍽️" name="Refeitório" temp="23.7" hum="57%" co2="870" tempColor="text-danger" co2Color="text-danger" />
            <RoomCard icon="📚" name="Biblioteca" temp="20.8" hum="43%" co2="558" tempColor="text-success" co2Color="text-success" />
            <RoomCard icon="🎓" name="Sala de Estudo" temp="21.7" hum="45%" co2="619" tempColor="text-success" co2Color="text-success" />
          </div>
        </section>
      </main>
    </div>
  );
}

function StatCard({ label, value, unit, delta, trend, color, big }: { label: string; value: string; unit: string; delta: string; trend: "up" | "down" | "flat"; color: string; big?: boolean }) {
  const arrow = trend === "up" ? "↗" : trend === "down" ? "↘" : "→";
  const arrowColor = trend === "up" ? "text-success" : trend === "down" ? "text-danger" : "text-muted-foreground";
  return (
    <div className="bg-card rounded-2xl border border-border p-4 flex flex-col gap-2">
      <div className="flex justify-between items-start text-xs">
        <span className="text-muted-foreground">{label}</span>
        <span className={`font-semibold ${arrowColor}`}>{delta}</span>
      </div>
      <div className="flex items-end justify-between">
        <div>
          <span className={`${big ? "text-3xl" : "text-4xl"} font-bold ${color}`}>{value}</span>
          <span className="text-sm text-muted-foreground ml-1">{unit}</span>
        </div>
        <span className={`text-2xl ${arrowColor}`}>{arrow}</span>
      </div>
    </div>
  );
}

function RoomCard({ icon, name, temp, hum, co2, tempColor, co2Color }: { icon: string; name: string; temp: string; hum: string; co2: string; tempColor: string; co2Color: string }) {
  return (
    <div className="rounded-xl border border-border p-3 bg-background">
      <div className="flex items-center gap-2 text-sm font-semibold text-primary mb-2">
        <span>{icon}</span> {name}
      </div>
      <div className={`text-3xl font-bold ${tempColor}`}>{temp}<span className="text-base text-muted-foreground"> °C</span></div>
      <div className="flex justify-between mt-3 text-xs">
        <div>
          <div className="text-muted-foreground uppercase tracking-wide">💧 Humidade</div>
          <div className="font-semibold mt-1">{hum}</div>
        </div>
        <div className="text-right">
          <div className="text-muted-foreground uppercase tracking-wide">🫁 CO₂</div>
          <div className={`font-semibold mt-1 ${co2Color}`}>{co2} ppm</div>
        </div>
      </div>
    </div>
  );
}

function EventosCard({ className = "" }: { className?: string }) {
  const monthDays = Array.from({ length: 31 }, (_, i) => i + 1);
  const eventByDay = new Map(EVENTS.map((e) => [e.day, e]));
  // May 2026 starts on Friday
  const startOffset = 4; // Mon=0
  return (
    <div className={`bg-card rounded-2xl border border-border p-4 flex flex-col min-h-0 ${className}`}>
      <div className="flex items-center justify-between mb-3 shrink-0">
        <div>
          <h2 className="text-lg font-bold text-primary">Eventos</h2>
          <p className="text-xs text-muted-foreground capitalize">maio 2026</p>
        </div>
      </div>
      <div className="grid grid-cols-7 gap-1 text-center text-[10px] font-semibold text-muted-foreground uppercase mb-1 shrink-0">
        {["Seg","Ter","Qua","Qui","Sex","Sáb","Dom"].map((d) => <div key={d}>{d}</div>)}
      </div>
      <div className="grid grid-cols-7 gap-1 flex-1 min-h-0">
        {Array.from({ length: startOffset }).map((_, i) => <div key={`e${i}`} />)}
        {monthDays.map((d) => {
          const ev = eventByDay.get(d);
          const isToday = d === 6;
          return (
            <div key={d} className={`rounded-md border ${isToday ? "border-brand bg-brand/5" : "border-border"} p-1 flex flex-col text-left text-[10px] min-h-0 overflow-hidden`}>
              <span className={`font-bold ${isToday ? "text-brand" : "text-primary"}`}>{d}</span>
              {ev && (
                <span className={`mt-auto rounded px-1 py-0.5 text-[9px] font-medium leading-tight ${ev.color} truncate`} title={ev.title}>
                  {ev.title}
                </span>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function EmentaCard({ idx }: { idx: number }) {
  const day = WEEKDAYS[idx];
  const m = EMENTAS[day.key];
  return (
    <div className="bg-card rounded-2xl border border-border p-4 flex flex-col min-h-0 overflow-hidden">
      <div className="flex items-center justify-between mb-3 shrink-0">
        <div>
          <h2 className="text-lg font-bold text-primary">Ementa da Semana</h2>
          <p className="text-xs text-muted-foreground">Almoço · escola</p>
        </div>
        <div className="flex gap-1">
          {WEEKDAYS.map((d, i) => (
            <span key={d.key} className={`size-2 rounded-full transition-all ${i === idx ? "bg-brand w-6" : "bg-border"}`} />
          ))}
        </div>
      </div>

      <div key={day.key} className="ementa-enter flex-1 min-h-0 flex flex-col justify-center bg-gradient-to-br from-brand/5 to-info/5 rounded-xl p-4 border border-border">
        <div className="text-xs uppercase tracking-widest text-muted-foreground">{day.date}</div>
        <div className="text-2xl font-bold text-brand mb-3">{day.label}</div>
        <Row label="Sopa" value={m.sopa} />
        <Row label="Prato Principal" value={m.principal} />
        <Row label="Opção Vegetariana" value={m.veg} />
        <Row label="Sobremesa" value={m.sobremesa} />
        <Row label="Bebida" value={m.bebida} />
      </div>
    </div>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="py-1.5 border-b border-border/50 last:border-0">
      <div className="text-[10px] uppercase tracking-wider text-muted-foreground">{label}</div>
      <div className="text-sm font-semibold text-foreground">{value}</div>
    </div>
  );
}