"use client";

import * as React from "react";
import Link from "next/link";
import { motion, AnimatePresence } from "motion/react";
import { Sparkles, Wrench } 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 { StatusBadge, StatusDot, TONE_BG } from "@/components/ui/badge";
import { SourceChip } from "@/components/inventory/conflict-alternatives";
import { APARTMENT_STATUS_META, CLEANING_STATUS_META, type ApartmentStatus } from "@/lib/domain";
import { fmtDate, parseDay } from "@/lib/dates";
import { fmtMoney } from "@/lib/format";
import { useReservationDrawer } from "@/components/reservations/reservation-drawer";
import { ApartmentThumb } from "@/components/ui/apartment-thumb";

const ORDER: ApartmentStatus[] = ["OCCUPIED", "RESERVED", "AVAILABLE", "CLEANING", "MAINTENANCE", "BLOCKED"];

export function Portfolio({ items, counts, currency, className }: { items: CommandCenterData["portfolio"]; counts: Record<string, number>; currency: string; className?: string }) {
  const [filter, setFilter] = React.useState<string | null>(null);
  const { open } = useReservationDrawer();
  const total = items.length || 1;
  const list = filter ? items.filter((a) => a.status === filter) : items;
  return (
    <Card className={className}>
      <CardHeader title="Apartment portfolio" description={`${items.length} apartments · click a status to filter`} action={filter ? <button type="button" onClick={() => setFilter(null)} className="text-xs text-primary hover:underline">Clear filter</button> : null} />
      <CardContent>
        {/* animated segmented bar */}
        <div className="flex h-3 w-full overflow-hidden rounded-full bg-surface-3">
          {ORDER.filter((s) => counts[s]).map((s) => (
            <motion.button key={s} type="button" layout onClick={() => setFilter(filter === s ? null : s)} className={cn("h-full transition-opacity", TONE_BG[APARTMENT_STATUS_META[s].tone], filter && filter !== s && "opacity-30")} initial={{ width: 0 }} animate={{ width: `${(counts[s] / total) * 100}%` }} transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }} title={`${counts[s]} ${APARTMENT_STATUS_META[s].label.toLowerCase()}`} />
          ))}
        </div>
        <div className="mt-2.5 flex flex-wrap gap-x-4 gap-y-1">
          {ORDER.filter((s) => counts[s]).map((s) => (
            <button key={s} type="button" onClick={() => setFilter(filter === s ? null : s)} className={cn("flex items-center gap-1.5 text-xs transition", filter === s ? "font-semibold text-fg" : "text-fg-muted hover:text-fg")}>
              <StatusDot status={s} /> <span className="tabular">{counts[s]}</span> {APARTMENT_STATUS_META[s].label.toLowerCase()}
            </button>
          ))}
        </div>
        <motion.ul layout className="mt-4 grid grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-4">
          <AnimatePresence initial={false}>
            {list.map((a) => {
              const meta = APARTMENT_STATUS_META[a.status as ApartmentStatus];
              return (
                <motion.li key={a.id} layout initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.96 }} transition={{ duration: 0.2 }} className="card-lift group relative rounded-lg border border-border bg-surface p-3">
                  <span className={cn("absolute left-0 top-3 h-8 w-1 rounded-r", TONE_BG[meta?.tone ?? "neutral"])} />
                  <Link href={`/apartments/${a.id}`} className="mb-2 block overflow-hidden rounded-md">
                    <ApartmentThumb imageId={a.coverImageId} code={a.code} showCode={false} width={320} rounded="rounded-md" className="aspect-[16/10] w-full transition-transform duration-500 [&_img]:transition-transform [&_img]:duration-500 group-hover:[&_img]:scale-105" />
                  </Link>
                  <div className="flex items-start justify-between gap-2">
                    <Link href={`/apartments/${a.id}`} className="font-mono text-sm font-bold hover:text-primary">
                      {a.code}
                    </Link>
                    <StatusBadge status={a.status} size="sm" />
                  </div>
                  <p className="truncate text-xs text-fg-muted">{a.name}</p>
                  <div className="mt-2 min-h-[34px] text-xs">
                    {a.current ? (
                      <button type="button" onClick={() => open(a.current!.id)} className="block w-full truncate text-left hover:text-primary">
                        <span className="font-medium">{a.current.guest}</span>
                        <span className="block text-fg-subtle">until {fmtDate(parseDay(a.current.checkOut), { style: "weekday" })}</span>
                      </button>
                    ) : a.block ? (
                      <span className="flex items-center gap-1.5">
                        <SourceChip source={a.block.source} /> {a.block.guest ?? ""}
                      </span>
                    ) : a.next ? (
                      <button type="button" onClick={() => open(a.next!.id)} className="block w-full truncate text-left hover:text-primary">
                        <span className="text-fg-subtle">next</span> <span className="font-medium">{a.next.guest}</span>
                        <span className="block text-fg-subtle">{fmtDate(parseDay(a.next.checkIn), { style: "weekday" })}</span>
                      </button>
                    ) : (
                      <span className="text-fg-subtle">No upcoming stay</span>
                    )}
                  </div>
                  <div className="mt-2 flex items-center justify-between border-t border-border pt-2 text-2xs text-fg-muted">
                    <span className="tabular">{fmtMoney(a.basePrice, currency, { compact: true, whole: true })}/n</span>
                    <span className="flex items-center gap-2">
                      {a.cleaningStatus !== "CLEAN" && a.cleaningStatus !== "READY" ? (
                        <span className="flex items-center gap-0.5 text-warning-600" title={CLEANING_STATUS_META[a.cleaningStatus as keyof typeof CLEANING_STATUS_META]?.label}>
                          <Sparkles className="size-3" />
                        </span>
                      ) : null}
                      {a.openMaintenance ? (
                        <span className="flex items-center gap-0.5 text-negative-600">
                          <Wrench className="size-3" /> {a.openMaintenance}
                        </span>
                      ) : null}
                      <span className="tabular" title="Occupancy last 30 days">
                        {a.occupancy30}%
                      </span>
                    </span>
                  </div>
                  <div className="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-surface-3">
                    <motion.div className="h-full rounded-full bg-primary/70" initial={{ width: 0 }} animate={{ width: `${a.occupancy30}%` }} transition={{ duration: 0.6 }} />
                  </div>
                </motion.li>
              );
            })}
          </AnimatePresence>
        </motion.ul>
      </CardContent>
    </Card>
  );
}