"use client";

import * as React from "react";
import Link from "next/link";
import { motion } from "motion/react";
import { ArrowDownRight, ArrowUpRight, DoorOpen, RefreshCcw } from "lucide-react";
import { cn } from "@/lib/utils";
import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/primitives";
import { fmtMoney, fmtPercent, fmtNumber } from "@/lib/format";
import { fmtRange, fmtDate, parseDay } from "@/lib/dates";
import { pct } from "@/lib/utils";

/* ── Revenue realization ─────────────────────────────────────── */
export function RealizationCard({ r, currency }: { r: { realized: number; expected: number; collected: number; outstanding: number; cancelledValue: number }; currency: string }) {
  const total = r.realized + r.expected || 1;
  const segs = [
    { k: "Realized", v: r.realized, cls: "bg-primary", hint: "Guests who checked in or completed their stay" },
    { k: "Expected", v: r.expected, cls: "bg-brand-300 dark:bg-brand-700", hint: "Confirmed reservations that have not arrived yet" },
  ];
  return (
    <Card>
      <CardHeader title="Revenue realization" description="What is already earned versus what is still to come" />
      <CardContent className="space-y-4">
        <div className="flex h-3.5 w-full overflow-hidden rounded-full bg-surface-3">
          {segs.map((s) => (
            <motion.div key={s.k} className={s.cls} initial={{ width: 0 }} animate={{ width: `${(s.v / total) * 100}%` }} transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }} title={`${s.k}: ${fmtMoney(s.v, currency)}`} />
          ))}
        </div>
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
          {segs.map((s) => (
            <div key={s.k} className="rounded-lg border border-border p-3">
              <p className="flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wider text-fg-muted">
                <span className={cn("size-2 rounded-sm", s.cls)} /> {s.k}
              </p>
              <p className="mt-1 text-lg font-semibold tabular">{fmtMoney(s.v, currency, { compact: true, whole: true })}</p>
              <p className="text-2xs text-fg-subtle">{fmtPercent(pct(s.v, total), 0)} · {s.hint}</p>
            </div>
          ))}
          <div className="rounded-lg border border-border p-3">
            <p className="text-2xs font-semibold uppercase tracking-wider text-fg-muted">Collected</p>
            <p className="mt-1 text-lg font-semibold tabular text-positive-600">{fmtMoney(r.collected, currency, { compact: true, whole: true })}</p>
            <p className="text-2xs text-fg-subtle">{fmtPercent(pct(r.collected, total), 0)} of booked value</p>
          </div>
          <div className="rounded-lg border border-border p-3">
            <p className="text-2xs font-semibold uppercase tracking-wider text-fg-muted">Outstanding</p>
            <p className={cn("mt-1 text-lg font-semibold tabular", r.outstanding > 0 ? "text-warning-600" : "")}>{fmtMoney(r.outstanding, currency, { compact: true, whole: true })}</p>
            <p className="text-2xs text-fg-subtle">
              {r.cancelledValue > 0 ? `${fmtMoney(r.cancelledValue, currency, { compact: true, whole: true })} cancelled` : "nothing cancelled"}
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

/* ── Inventory recovery ──────────────────────────────────────── */
type Reopened = { id: string; apartment: string; start: string; end: string; nights: number; value: number; reason: string | null; reservation: string | null; guest: string | null; at: string; rebooked: boolean };
type Early = { id: string; code: string; guest: string; apartment: string; planned: string; actual: string; releasedNights: number; value: number };

export function RecoveryCard({ r, currency, today }: { r: { releasedNights: number; lostRevenue: number; recoveredNights: number; recoveredRevenue: number; recoveredDelta: number | null; reopenedNights: number; reopenedValue: number; rebookRate: number; reopened: Reopened[]; earlyCheckouts: Early[] }; currency: string; today: string }) {
  const [tab, setTab] = React.useState<"reopened" | "early">("reopened");
  const recoveredShare = pct(r.recoveredRevenue, r.lostRevenue || r.recoveredRevenue || 1);
  return (
    <Card>
      <CardHeader
        title={
          <span className="flex items-center gap-2">
            <RefreshCcw className="size-4 text-positive-600" /> Inventory recovery
          </span>
        }
        description="Nights handed back by early check-outs and cancellations, and how much of them you re-sold"
      />
      <CardContent className="space-y-4">
        <div className="grid grid-cols-2 gap-3 lg:grid-cols-5">
          <Stat label="Nights released" value={fmtNumber(r.releasedNights)} sub="from early check-outs" tone="warning" />
          <Stat label="Value released" value={fmtMoney(r.lostRevenue, currency, { compact: true, whole: true })} sub="booked value handed back" tone="warning" />
          <Stat label="Nights recovered" value={fmtNumber(r.recoveredNights)} sub="re-sold released nights" tone="positive" />
          <Stat label="Recovered revenue" value={fmtMoney(r.recoveredRevenue, currency, { compact: true, whole: true })} sub={r.recoveredDelta != null ? `${r.recoveredDelta >= 0 ? "+" : ""}${r.recoveredDelta.toFixed(0)}% vs previous` : `${fmtPercent(recoveredShare, 0)} of released value`} tone="positive" delta={r.recoveredDelta} />
          <Stat label="Reopened inventory" value={`${fmtNumber(r.reopenedNights)} n`} sub={`≈ ${fmtMoney(r.reopenedValue, currency, { compact: true, whole: true })} · ${fmtPercent(r.rebookRate, 0)} re-booked`} />
        </div>
        <div>
          <div className="mb-2 flex items-center justify-between">
            <Tabs value={tab} onValueChange={(v) => setTab(v as typeof tab)}>
              <TabsList variant="pill" className="h-8">
                <TabsTrigger value="reopened" className="py-1 text-xs">
                  Released ranges ({r.reopened.length})
                </TabsTrigger>
                <TabsTrigger value="early" className="py-1 text-xs">
                  Early check-outs ({r.earlyCheckouts.length})
                </TabsTrigger>
              </TabsList>
            </Tabs>
          </div>
          {tab === "reopened" ? (
            r.reopened.length === 0 ? (
              <p className="text-sm text-fg-muted">No inventory was released in this period.</p>
            ) : (
              <ul className="divide-y divide-border">
                {r.reopened.map((e) => (
                  <li key={e.id} className="flex flex-wrap items-center gap-3 py-2 text-sm">
                    <span className="flex size-8 items-center justify-center rounded-md bg-surface-2 font-mono text-xs font-semibold">{e.apartment}</span>
                    <span className="min-w-0 flex-1">
                      <span className="block font-medium">
                        {e.nights} night{e.nights > 1 ? "s" : ""} · {fmtRange(e.start, e.end)}
                      </span>
                      <span className="block text-xs text-fg-muted">
                        {e.reason === "EARLY_CHECKOUT" ? "Early check-out" : e.reason === "CANCELLED" ? "Cancellation" : e.reason === "HOLD" ? "Hold released" : "Released"}
                        {e.reservation ? ` · ${e.reservation}` : ""}
                        {e.guest ? ` · ${e.guest}` : ""} · {fmtDate(e.at, { style: "short" })}
                      </span>
                    </span>
                    <span className="text-xs tabular text-fg-muted">≈ {fmtMoney(e.value, currency)}</span>
                    {e.rebooked ? <Badge tone="positive" size="sm">Re-booked</Badge> : parseDay(e.end) > parseDay(today) ? <Link href={`/calendar?start=${e.start}`} className="text-xs font-medium text-primary hover:underline">Sell</Link> : <Badge tone="neutral" size="sm">Unsold</Badge>}
                  </li>
                ))}
              </ul>
            )
          ) : r.earlyCheckouts.length === 0 ? (
            <p className="text-sm text-fg-muted">No early check-outs in this period.</p>
          ) : (
            <ul className="divide-y divide-border">
              {r.earlyCheckouts.map((e) => (
                <li key={e.id} className="flex flex-wrap items-center gap-3 py-2 text-sm">
                  <span className="flex size-8 items-center justify-center rounded-md bg-accent-50 text-accent-600 dark:bg-accent-500/10">
                    <DoorOpen className="size-4" />
                  </span>
                  <span className="min-w-0 flex-1">
                    <Link href={`/reservations/${e.id}`} className="block font-medium hover:text-primary">
                      {e.guest} · {e.apartment}
                    </Link>
                    <span className="block text-xs text-fg-muted">
                      {e.code} · left {fmtDate(e.actual, { style: "short" })} instead of {fmtDate(e.planned, { style: "short" })}
                    </span>
                  </span>
                  <span className="text-xs tabular">
                    {e.releasedNights}n · <span className="text-warning-600">{fmtMoney(e.value, currency)}</span>
                  </span>
                </li>
              ))}
            </ul>
          )}
        </div>
      </CardContent>
    </Card>
  );
}

function Stat({ label, value, sub, tone, delta }: { label: string; value: string; sub?: string; tone?: "positive" | "warning"; delta?: number | null }) {
  return (
    <div className="rounded-lg border border-border p-3">
      <p className="text-2xs font-semibold uppercase tracking-wider text-fg-muted">{label}</p>
      <p className={cn("mt-1 flex items-center gap-1.5 text-lg font-semibold tabular", tone === "positive" && "text-positive-600", tone === "warning" && "text-warning-600")}>
        {value}
        {delta != null && delta !== 0 ? (delta > 0 ? <ArrowUpRight className="size-4 text-positive-600" /> : <ArrowDownRight className="size-4 text-negative-600" />) : null}
      </p>
      {sub ? <p className="text-2xs text-fg-subtle">{sub}</p> : null}
    </div>
  );
}

/* ── Comparison mode ─────────────────────────────────────────── */
type Cmp = {
  period: { metric: string; current: number; previous: number; money: boolean; invert?: boolean }[];
  source: { name: string; color: string; current: number; previous: number; count: number }[];
  worker: { id: string; name: string; role: string; current: number; previous: number; count: number; cancelled: number; commissions: number }[];
  apartments: { id: string; code: string; name: string; revenue: number; previous: number; occupancy: number }[];
};

export function ComparisonCard({ c, currency, showProfit }: { c: Cmp; currency: string; showProfit: boolean }) {
  const [dim, setDim] = React.useState<"period" | "apartment" | "source" | "worker">("period");
  const rows: { key: string; label: string; sub?: string; current: number; previous: number; money: boolean; invert?: boolean; color?: string; href?: string }[] =
    dim === "period"
      ? c.period.filter((p) => showProfit || p.metric !== "Profit").map((p) => ({ key: p.metric, label: p.metric, current: p.current, previous: p.previous, money: p.money, invert: p.invert }))
      : dim === "apartment"
        ? c.apartments.map((a) => ({ key: a.id, label: a.code, sub: `${a.name} · ${fmtPercent(a.occupancy, 0)} occ.`, current: a.revenue, previous: a.previous, money: true, href: `/apartments/${a.id}` }))
        : dim === "source"
          ? c.source.map((s) => ({ key: s.name, label: s.name, sub: `${s.count} reservations`, current: s.current, previous: s.previous, money: true, color: s.color }))
          : c.worker.map((w) => ({ key: w.id, label: w.name, sub: `${w.role} · ${w.count} confirmed · ${w.cancelled} cancelled · ${fmtMoney(w.commissions, currency, { compact: true, whole: true })} commission`, current: w.current, previous: w.previous, money: true, href: `/workers/${w.id}` }));
  const max = Math.max(1, ...rows.map((r) => Math.max(r.current, r.previous)));
  return (
    <Card>
      <CardHeader
        title="Comparison"
        description="Current period versus the previous period of the same length"
        action={
          <Tabs value={dim} onValueChange={(v) => setDim(v as typeof dim)}>
            <TabsList variant="pill" className="h-8">
              {(["period", "apartment", "source", "worker"] as const).map((d) => (
                <TabsTrigger key={d} value={d} className="py-1 text-xs capitalize">
                  {d}
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>
        }
      />
      <CardContent>
        {rows.length === 0 ? (
          <p className="text-sm text-fg-muted">Nothing to compare in this period.</p>
        ) : (
          <ul className="space-y-2.5">
            {rows.map((r) => {
              const d = r.previous ? ((r.current - r.previous) / Math.abs(r.previous)) * 100 : null;
              const good = d == null ? null : r.invert ? d < 0 : d > 0;
              const fmt = (v: number) => (r.money ? fmtMoney(v, currency, { compact: true, whole: true }) : dim === "period" && r.label.endsWith("%") ? fmtPercent(v, 0) : fmtNumber(v));
              const inner = (
                <>
                  <div className="flex items-center justify-between gap-3 text-sm">
                    <span className="flex min-w-0 items-center gap-2">
                      {r.color ? <span className="size-2 rounded-full" style={{ background: r.color }} /> : null}
                      <span className="truncate font-medium">{r.label}</span>
                      {r.sub ? <span className="hidden truncate text-xs text-fg-subtle sm:inline">{r.sub}</span> : null}
                    </span>
                    <span className="flex shrink-0 items-center gap-2 tabular">
                      <span className="text-xs text-fg-muted">{fmt(r.previous)}</span>
                      <span className="text-fg-subtle">→</span>
                      <span className="font-semibold">{fmt(r.current)}</span>
                      {d != null ? <span className={cn("w-14 text-right text-xs font-medium", d === 0 ? "text-fg-subtle" : good ? "text-positive-600" : "text-negative-600")}>{d > 0 ? "+" : ""}{d.toFixed(0)}%</span> : <span className="w-14 text-right text-xs text-fg-subtle">new</span>}
                    </span>
                  </div>
                  <div className="mt-1 space-y-0.5">
                    <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-3">
                      <motion.div className="h-full rounded-full bg-primary" initial={{ width: 0 }} animate={{ width: `${(Math.max(0, r.current) / max) * 100}%` }} transition={{ duration: 0.5 }} />
                    </div>
                    <div className="h-1 w-full overflow-hidden rounded-full bg-surface-3">
                      <motion.div className="h-full rounded-full bg-stone-400/70" initial={{ width: 0 }} animate={{ width: `${(Math.max(0, r.previous) / max) * 100}%` }} transition={{ duration: 0.5 }} />
                    </div>
                  </div>
                </>
              );
              return (
                <li key={r.key}>
                  {r.href ? (
                    <Link href={r.href} className="block rounded-md p-1 -m-1 transition hover:bg-surface-2">
                      {inner}
                    </Link>
                  ) : (
                    inner
                  )}
                </li>
              );
            })}
          </ul>
        )}
        <p className="mt-3 text-2xs text-fg-subtle">Thick bar: current period · thin bar: previous period</p>
      </CardContent>
    </Card>
  );
}