"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { countAdminBadges, isInboxBooking } from "@/lib/admin-workspace";
import type { Booking } from "@/lib/bookings";
import type { Inquiry } from "@/lib/inquiries";

type Summary = {
  needsAction: number;
  today: number;
  upcoming: number;
  unpaid: number;
  waitlisted: number;
  newInquiries: number;
};

function todayKey() {
  return new Date().toISOString().slice(0, 10);
}

function isToday(preferredDate: string) {
  const key = todayKey();
  return preferredDate.includes(key) || preferredDate.startsWith(key);
}

function isUpcoming(preferredDate: string) {
  const match = preferredDate.match(/\d{4}-\d{2}-\d{2}/);
  if (!match) return false;
  return match[0] >= todayKey();
}

export function AdminDashboard() {
  const [bookings, setBookings] = useState<Booking[]>([]);
  const [inquiries, setInquiries] = useState<Inquiry[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    let cancelled = false;

    async function load() {
      setLoading(true);
      setError("");
      try {
        const [bookingsResponse, inquiriesResponse] = await Promise.all([
          fetch("/api/bookings", { cache: "no-store" }),
          fetch("/api/inquiries", { cache: "no-store" }),
        ]);

        if (!bookingsResponse.ok || !inquiriesResponse.ok) {
          throw new Error("Could not load dashboard data.");
        }

        const bookingsData = (await bookingsResponse.json()) as { bookings?: Booking[] };
        const inquiriesData = (await inquiriesResponse.json()) as { inquiries?: Inquiry[] };
        if (!cancelled) {
          setBookings(bookingsData.bookings ?? []);
          setInquiries(inquiriesData.inquiries ?? []);
        }
      } catch (err) {
        if (!cancelled) {
          setError(err instanceof Error ? err.message : "Dashboard failed to load.");
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    void load();
    return () => {
      cancelled = true;
    };
  }, []);

  const summary = useMemo<Summary>(() => {
    const badges = countAdminBadges(bookings, inquiries);
    return {
      needsAction: badges.inbox,
      today: bookings.filter((booking) => booking.status !== "cancelled" && isToday(booking.preferredDate)).length,
      upcoming: bookings.filter(
        (booking) => (booking.status === "confirmed" || booking.status === "requested") && isUpcoming(booking.preferredDate),
      ).length,
      unpaid: bookings.filter(
        (booking) => booking.status === "confirmed" && booking.paymentStatus === "pending",
      ).length,
      waitlisted: badges.waitlist,
      newInquiries: inquiries.filter((inquiry) => inquiry.status === "new").length,
    };
  }, [bookings, inquiries]);

  const urgent = useMemo(() => {
    const inboxBookings = bookings
      .filter((booking) => isInboxBooking(booking))
      .slice(0, 8)
      .map((booking) => ({
        id: booking.id,
        kind: "booking" as const,
        title: booking.item,
        meta: `${booking.name} · ${booking.preferredDate}`,
        href: `/admin/bookings?focus=${booking.id}`,
      }));

    const newInquiries = inquiries
      .filter((inquiry) => inquiry.status === "new")
      .slice(0, 6)
      .map((inquiry) => ({
        id: inquiry.id,
        kind: "inquiry" as const,
        title: inquiry.name,
        meta: inquiry.interest || inquiry.message.slice(0, 80),
        href: `/admin/inquiries?focus=${inquiry.id}`,
      }));

    return [...inboxBookings, ...newInquiries].slice(0, 10);
  }, [bookings, inquiries]);

  const cards: { label: string; value: number; href: string }[] = [
    { label: "Needs action", value: summary.needsAction, href: "/admin/bookings?view=inbox" },
    { label: "Today", value: summary.today, href: "/admin/bookings?view=today" },
    { label: "Upcoming", value: summary.upcoming, href: "/admin/bookings?view=upcoming" },
    { label: "Unpaid", value: summary.unpaid, href: "/admin/bookings?view=unpaid" },
    { label: "Waitlisted", value: summary.waitlisted, href: "/admin/bookings?view=waitlist" },
    { label: "New inquiries", value: summary.newInquiries, href: "/admin/inquiries?view=new" },
  ];

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Dashboard</h1>
        <p className="mt-1 text-[15px] text-[#5c5248]">Urgent work first — then browse by queue.</p>
      </div>

      {error ? (
        <p className="rounded-xl border border-[#e4b4b4] bg-[#f8e8e8] px-4 py-3 text-[15px] font-semibold text-[#5c1f1f]">
          {error}
        </p>
      ) : null}

      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
        {cards.map((card) => (
          <Link
            key={card.label}
            href={card.href}
            className="rounded-2xl border border-[#d9cfbf] bg-[#faf7f2] p-4 transition hover:border-[#c4a882]"
          >
            <p className="text-[13px] font-semibold uppercase tracking-[0.14em] text-[#9d7a52]">{card.label}</p>
            <p className="mt-2 text-3xl font-semibold tabular-nums">{loading ? "—" : card.value}</p>
          </Link>
        ))}
      </div>

      <section className="rounded-2xl border border-[#d9cfbf] bg-[#faf7f2]">
        <div className="border-b border-[#e4d9cb] px-4 py-3 sm:px-5">
          <h2 className="text-lg font-semibold">Most urgent</h2>
          <p className="text-sm text-[#5c5248]">Booking requests, changes, unpaid follow-ups, and new inquiries.</p>
        </div>
        {loading ? (
          <p className="px-4 py-6 text-[15px] text-[#5c5248] sm:px-5">Loading…</p>
        ) : urgent.length === 0 ? (
          <p className="px-4 py-6 text-[15px] text-[#5c5248] sm:px-5">Nothing urgent right now.</p>
        ) : (
          <ul className="divide-y divide-[#ebe3d7]">
            {urgent.map((item) => (
              <li key={`${item.kind}-${item.id}`}>
                <Link href={item.href} className="flex min-h-14 items-center justify-between gap-3 px-4 py-3 hover:bg-[#f3eee6] sm:px-5">
                  <div className="min-w-0">
                    <p className="truncate text-[15px] font-semibold">{item.title}</p>
                    <p className="truncate text-sm text-[#5c5248]">{item.meta}</p>
                  </div>
                  <span className="shrink-0 text-sm font-semibold text-[#9d7a52]">{item.kind === "booking" ? "Booking" : "Inquiry"} →</span>
                </Link>
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}