import { createSignal, onCleanup, onMount } from "solid-js";

export function DashboardMockup() {
  const [activeBar, setActiveBar] = createSignal<number | null>(null);
  const [pulseKpi, setPulseKpi] = createSignal<number | null>(null);
  let timer: ReturnType<typeof setInterval>;

  onMount(() => {
    let idx = 0;
    timer = setInterval(() => {
      setActiveBar(idx % 7);
      setPulseKpi(idx % 3);
      idx++;
    }, 1200);
  });

  onCleanup(() => clearInterval(timer));

  const kpis = [
    { label: "Rezervace", value: "48", trend: "+12%" },
    { label: "Obrat", value: "24K", trend: "+8%" },
    { label: "Klienti", value: "156", trend: "+5%" },
  ];

  const bookings = [
    { time: "09:00", name: "Martina N.", service: "Masáž" },
    { time: "11:30", name: "David S.", service: "Fyzio" },
    { time: "14:00", name: "Jana K.", service: "Manikúra" },
  ];

  const barData = [35, 55, 40, 70, 50, 85, 60];
  const barLabels = ["Po", "Út", "St", "Čt", "Pá", "So", "Ne"];

  return (
    <div class="w-full h-full flex flex-col gap-2 select-none">
      {/* Mini header */}
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-1.5">
          <div class="w-4 h-4 rounded bg-accent/20" />
          <span class="text-[10px] font-medium text-ink-muted">Dashboard</span>
        </div>
        <div class="flex gap-1">
          <div class="w-1.5 h-1.5 rounded-full bg-success" />
          <span class="text-[9px] text-ink-subtle">Online</span>
        </div>
      </div>

      {/* KPI row */}
      <div class="grid grid-cols-3 gap-2">
        {kpis.map((kpi, i) => (
          <div
            class={`rounded-lg border border-border/60 p-2 bg-canvas-subtle/40 transition-all duration-500 ${
              pulseKpi() === i ? "ring-1 ring-accent/30" : ""
            }`}
          >
            <p class="text-[9px] text-ink-subtle mb-0.5">{kpi.label}</p>
            <p class="text-sm font-display font-bold text-ink leading-none">{kpi.value}</p>
            <p class="text-[9px] text-success mt-0.5">{kpi.trend}</p>
          </div>
        ))}
      </div>

      {/* Mini bar chart */}
      <div class="flex-1 min-h-0 rounded-lg border border-border/60 bg-canvas-subtle/30 p-2 flex flex-col">
        <p class="text-[9px] text-ink-subtle mb-1.5">Trend rezervací</p>
        <div class="flex-1 flex items-end gap-1">
          {barData.map((h, i) => (
            <div class="flex-1 flex flex-col items-center gap-1 group">
              <div
                class={`w-full rounded-t transition-all duration-700 ease-out ${
                  activeBar() === i ? "bg-accent" : "bg-accent/25"
                }`}
                style={{ height: `${h}%` }}
              />
              <span class="text-[8px] text-ink-subtle">{barLabels[i]}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Mini booking list */}
      <div class="rounded-lg border border-border/60 bg-canvas-subtle/30 p-2">
        <p class="text-[9px] text-ink-subtle mb-1.5">Dnešní rezervace</p>
        <div class="space-y-1">
          {bookings.map((b, i) => (
            <div
              class={`flex items-center gap-2 rounded px-1.5 py-1 transition-colors duration-300 ${
                activeBar() === i ? "bg-accent/10" : ""
              }`}
            >
              <span class="text-[9px] font-medium text-accent w-7 shrink-0">{b.time}</span>
              <div class="w-4 h-4 rounded-full bg-accent-subtle flex items-center justify-center text-[7px] font-bold text-accent shrink-0">
                {b.name.split(" ").map((n) => n[0]).join("")}
              </div>
              <div class="min-w-0">
                <p class="text-[10px] font-medium text-ink truncate">{b.name}</p>
                <p class="text-[8px] text-ink-subtle">{b.service}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
