"use client";

import Link from "next/link";
import { BookOpen, Route } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";

// One static map instead of a product tour (design §2e). Meanings follow the glossary wording.
const STEPS = [
  { key: "inquiry", label: "Inquiry", meaning: "A buyer's request for price and capacity. Styles, factory prices and your quote build on it." },
  { key: "costing", label: "Costing", meaning: "Your costing of a style: fabric, trims, CM, freight and your margin." },
  { key: "quote", label: "Buyer quote", meaning: "The price you send the buyer, made from the approved cost sheet." },
  { key: "po", label: "Buyer PO", meaning: "The buyer's confirmed order. Nothing ships without it.", start: true },
  { key: "allocation", label: "Factory allocation", meaning: "Your split of a PO to one or more factories. Production is tracked per factory." },
  { key: "tna", label: "Time & action and approvals", meaning: "Your dated plan of every step to shipment, with lab dips, fit and PP samples approved on time." },
  { key: "production", label: "Production and inspection", meaning: "The factory's cut, sewn and packed pieces, and the inline and final inspections that release the goods." },
  { key: "shipping", label: "Shipment and payment", meaning: "Booking, documents handed over, the invoice and the money coming in." },
];

/** "How an order flows here": 8 steps, each with a tap-to-explain label. Used on Get started and the new-org dashboard. */
export function FlowMap({ className, highlight = "po" }) {
  return <Card className={cn("gap-4", className)}>
    <CardHeader>
      <CardTitle className="flex items-center gap-2 text-base"><Route className="size-4 text-muted-foreground" /> How an order flows here</CardTitle>
      <CardDescription>You can start at any step. Running orders can go straight to Buyer PO.</CardDescription>
    </CardHeader>
    <CardContent>
      <ol className="grid" aria-label="Order flow">
        {STEPS.map((step, index) => {
          const marked = step.key === highlight;
          return <li key={step.key} className="relative flex gap-3 pb-3 last:pb-0">
            {index < STEPS.length - 1 && <span className="absolute left-3 top-6 h-[calc(100%-1.5rem)] w-px bg-border" aria-hidden="true" />}
            <span className={cn("relative z-10 grid size-6 shrink-0 place-items-center rounded-full border bg-background text-xs font-medium tabular-nums text-muted-foreground", marked && "border-primary bg-primary text-primary-foreground")}>{index + 1}</span>
            <div className="flex min-w-0 flex-wrap items-center gap-2 pt-0.5">
              <Popover>
                <PopoverTrigger asChild>
                  <button type="button" className="text-left text-sm underline decoration-muted-foreground/50 decoration-dotted underline-offset-4 outline-none hover:decoration-foreground focus-visible:rounded-sm focus-visible:ring-[3px] focus-visible:ring-ring/50">{step.label}</button>
                </PopoverTrigger>
                <PopoverContent align="start" className="grid w-72 gap-2 text-sm">
                  <p className="font-semibold">{step.label}</p>
                  <p className="text-muted-foreground">{step.meaning}</p>
                  <Button variant="link" size="sm" className="h-auto justify-start p-0" asChild><Link href="/help/glossary"><BookOpen /> Open glossary</Link></Button>
                </PopoverContent>
              </Popover>
              {marked && step.start && <Badge variant="secondary" className="h-5">Running orders start here</Badge>}
            </div>
          </li>;
        })}
      </ol>
    </CardContent>
  </Card>;
}