"use client";

import useSWR from "swr";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ClipboardList, ArrowRight } from "lucide-react";
import { formatCurrency } from "@/lib/format";
import type { Product } from "@/lib/types";

const fetcher = (url: string) => fetch(url).then((r) => r.json());

const statusStyles: Record<string, string> = {
  draft: "bg-muted text-muted-foreground",
  active: "bg-accent/15 text-accent border-accent/30",
  deprecated: "bg-warning/15 text-warning border-warning/30",
  archived: "bg-muted text-muted-foreground",
};

export default function BomIndexPage() {
  const { data: products = [] } = useSWR<Product[]>("/api/products", fetcher);

  return (
    <div className="flex flex-col gap-6 p-6 lg:p-8">
      <div>
        <h1 className="text-2xl font-bold tracking-tight text-foreground">
          Bill of Materials
        </h1>
        <p className="text-sm text-muted-foreground">
          Select a product to view or manage its BOM
        </p>
      </div>

      {products.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-16">
            <ClipboardList className="h-12 w-12 text-muted-foreground/40 mb-4" />
            <p className="text-muted-foreground mb-4">
              No products created yet. Create a product first to manage its BOM.
            </p>
            <Button asChild>
              <Link href="/products">Go to Products</Link>
            </Button>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {products.map((prod) => (
            <Link key={prod.id} href={`/bom/${prod.id}`}>
              <Card className="group hover:border-primary/50 transition-colors cursor-pointer h-full">
                <CardHeader className="pb-2">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-base">{prod.name}</CardTitle>
                    <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
                  </div>
                  <p className="font-mono text-xs text-muted-foreground">
                    {prod.sku} &middot; v{prod.version}
                  </p>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between">
                    <Badge
                      variant="outline"
                      className={statusStyles[prod.status] || ""}
                    >
                      {prod.status}
                    </Badge>
                    <div className="text-right text-sm">
                      <span className="text-muted-foreground">
                        {prod.bom_count || 0} items
                      </span>
                      <span className="mx-2 text-border">|</span>
                      <span className="font-mono font-medium">
                        {formatCurrency(Number(prod.total_cost || 0))}
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}