"use client";

import Link from "next/link";
import { ArrowRight, Sparkles, TrendingUp } from "lucide-react";
import { cn } from "@/lib/utils";
import type { CommandCenterData } from "@/lib/queries/command-center";
import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { fmtMoney, fmtPercent } from "@/lib/format";

export function Opportunities({ items, recovery, currency }: { items: CommandCenterData["opportunities"]; recovery: CommandCenterData["recovery"]; currency: string }) {
  const potential = items.reduce((s, i) => s + (i.value ?? 0), 0);
  return (
    <Card className="relative overflow-hidden">
      <div className="pointer-events-none absolute -right-8 -top-8 size-32 rounded-full bg-gold-500/10 blur-2xl" aria-hidden />
      <CardHeader title={<span className="flex items-center gap-2"><Sparkles className="size-4 text-gold-500" /> Revenue opportunities</span>} description={potential ? `≈ ${fmtMoney(potential, currency, { compact: true, whole: true })} of sellable inventory right now` : "Inventory you could still sell"} />
      <CardContent className="space-y-3">
        <div className="grid grid-cols-3 gap-2 text-center">
          <div className="rounded-lg bg-surface-2 p-2">
            <p className="text-lg font-semibold tabular text-positive-600">{recovery.recoveredNights}</p>
            <p className="text-2xs uppercase tracking-wider text-fg-subtle">nights recovered</p>
          </div>
          <div className="rounded-lg bg-surface-2 p-2">
            <p className="text-lg font-semibold tabular">{fmtMoney(recovery.recoveredRevenue, currency, { compact: true, whole: true })}</p>
            <p className="text-2xs uppercase tracking-wider text-fg-subtle">re-sold value</p>
          </div>
          <div className="rounded-lg bg-surface-2 p-2">
            <p className="text-lg font-semibold tabular">{fmtPercent(recovery.rebookRate, 0)}</p>
            <p className="text-2xs uppercase tracking-wider text-fg-subtle">rebook rate 30d</p>
          </div>
        </div>
        {items.length === 0 ? (
          <p className="text-sm text-fg-muted">Fully booked — no open inventory to sell right now.</p>
        ) : (
          <ul className="space-y-1.5">
            {items.slice(0, 6).map((o) => (
              <li key={o.id}>
                <Link href={o.href} className={cn("group flex items-center gap-3 rounded-lg border border-border p-2.5 text-sm transition hover:border-primary hover:shadow-sm")}>
                  <span className={cn("size-2 shrink-0 rounded-full", o.tone === "positive" ? "bg-positive-500" : o.tone === "warning" ? "bg-warning-500" : "bg-info-500")} />
                  <span className="min-w-0 flex-1">
                    <span className="block truncate font-medium">{o.title}</span>
                    <span className="block truncate text-xs text-fg-muted">{o.detail}</span>
                  </span>
                  {o.value ? <span className="text-xs font-semibold tabular text-fg">{fmtMoney(o.value, currency, { compact: true, whole: true })}</span> : null}
                  <ArrowRight className="size-4 text-fg-subtle transition group-hover:translate-x-0.5 group-hover:text-primary" />
                </Link>
              </li>
            ))}
          </ul>
        )}
        {recovery.lostRevenue > 0 ? (
          <p className="flex items-center gap-1.5 text-2xs text-fg-subtle">
            <TrendingUp className="size-3" /> Early check-outs released {fmtMoney(recovery.lostRevenue, currency, { compact: true, whole: true })} of booked value in this period; {fmtMoney(recovery.recoveredRevenue, currency, { compact: true, whole: true })} was re-sold.
          </p>
        ) : null}
      </CardContent>
    </Card>
  );
}