vibn-frontend/app/[workspace]/project/[projectId]/design/page.tsx

"use client";

import { use, useState, useEffect } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
import { CheckCircle2, ExternalLink, Loader2, Package } from "lucide-react";
import { cn } from "@/lib/utils";

// ---------------------------------------------------------------------------
// Design package catalogue
// ---------------------------------------------------------------------------

interface DesignPackage {
  id: string;
  name: string;
  description: string;
  bestFor: string[];
  url: string;
  tags: string[];
}

const PACKAGES: DesignPackage[] = [
  {
    id: "shadcn",
    name: "shadcn/ui",
    description:
      "Copy-paste components built on Radix UI primitives. Tailwind-styled, fully customisable — you own the code.",
    bestFor: ["App", "Admin", "Dashboard"],
    url: "https://ui.shadcn.com",
    tags: ["Tailwind", "Radix", "Headless"],
  },
  {
    id: "daisy-ui",
    name: "DaisyUI",
    description:
      "Tailwind plugin that adds semantic class names (btn, badge, card). Fastest path from idea to styled UI.",
    bestFor: ["Website", "Prototype"],
    url: "https://daisyui.com",
    tags: ["Tailwind", "Plugin", "Themes"],
  },
  {
    id: "hero-ui",
    name: "HeroUI",
    description:
      "Beautiful, accessible React components with smooth animations and dark mode built-in. Formerly NextUI.",
    bestFor: ["App", "Website", "Landing"],
    url: "https://heroui.com",
    tags: ["React", "Tailwind", "Animations"],
  },
  {
    id: "mantine",
    name: "Mantine",
    description:
      "100+ fully-featured React components with hooks, forms, and charts. Best for data-heavy admin tools.",
    bestFor: ["Admin", "Dashboard", "Complex Apps"],
    url: "https://mantine.dev",
    tags: ["React", "CSS-in-JS", "Hooks"],
  },
  {
    id: "headless-ui",
    name: "Headless UI",
    description:
      "Completely unstyled, accessible components by Tailwind Labs. Full creative control with Tailwind classes.",
    bestFor: ["Custom Design", "Brand-specific UI"],
    url: "https://headlessui.com",
    tags: ["Tailwind", "Unstyled", "Accessible"],
  },
  {
    id: "tailwind-only",
    name: "Tailwind only",
    description:
      "No component library — pure Tailwind CSS with your own components. Maximum flexibility, zero opinions.",
    bestFor: ["Custom", "Marketing Site"],
    url: "https://tailwindcss.com",
    tags: ["Tailwind", "Custom", "Minimal"],
  },
];

// ---------------------------------------------------------------------------
// Package card
// ---------------------------------------------------------------------------

function PackageCard({
  pkg,
  selected,
  saving,
  onSelect,
}: {
  pkg: DesignPackage;
  selected: boolean;
  saving: boolean;
  onSelect: () => void;
}) {
  return (
    <button
      onClick={onSelect}
      disabled={saving}
      className={cn(
        "relative w-full text-left rounded-xl border p-4 transition-all",
        selected
          ? "border-foreground bg-foreground/5 ring-1 ring-foreground"
          : "border-border hover:border-foreground/40 hover:bg-muted/40"
      )}
    >
      {selected && (
        <CheckCircle2 className="absolute top-3 right-3 h-4 w-4 text-foreground" />
      )}
      {saving && selected && (
        <Loader2 className="absolute top-3 right-3 h-4 w-4 animate-spin text-muted-foreground" />
      )}

      <p className="font-semibold text-sm text-foreground">{pkg.name}</p>
      <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
        {pkg.description}
      </p>

      <div className="flex flex-wrap gap-1 mt-3">
        {pkg.tags.map((tag) => (
          <Badge key={tag} variant="secondary" className="text-[10px] px-1.5 py-0">
            {tag}
          </Badge>
        ))}
      </div>

      <p className="text-[10px] text-muted-foreground mt-2">
        Best for: {pkg.bestFor.join(", ")}
      </p>
    </button>
  );
}

// ---------------------------------------------------------------------------
// App section
// ---------------------------------------------------------------------------

function AppSection({
  appName,
  selectedPackageId,
  onSelect,
}: {
  appName: string;
  selectedPackageId: string | undefined;
  onSelect: (appName: string, pkgId: string) => Promise<void>;
}) {
  const [saving, setSaving] = useState<string | null>(null);

  const handleSelect = async (pkgId: string) => {
    if (pkgId === selectedPackageId) return;
    setSaving(pkgId);
    await onSelect(appName, pkgId);
    setSaving(null);
  };

  const selectedPkg = PACKAGES.find((p) => p.id === selectedPackageId);

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="w-7 h-7 rounded-lg bg-muted flex items-center justify-center">
            <Package className="h-4 w-4 text-muted-foreground" />
          </div>
          <div>
            <p className="text-sm font-semibold capitalize">{appName}</p>
            {selectedPkg && (
              <p className="text-xs text-muted-foreground">
                Using {selectedPkg.name}
              </p>
            )}
          </div>
        </div>
        {selectedPkg && (
          <a
            href={selectedPkg.url}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
            onClick={(e) => e.stopPropagation()}
          >
            Docs
            <ExternalLink className="h-3 w-3" />
          </a>
        )}
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {PACKAGES.map((pkg) => (
          <PackageCard
            key={pkg.id}
            pkg={pkg}
            selected={selectedPackageId === pkg.id}
            saving={saving === pkg.id}
            onSelect={() => handleSelect(pkg.id)}
          />
        ))}
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Page
// ---------------------------------------------------------------------------

export default function DesignPage({
  params,
}: {
  params: Promise<{ workspace: string; projectId: string }>;
}) {
  const { projectId } = use(params);

  const [apps, setApps] = useState<{ name: string; path: string }[]>([]);
  const [designPackages, setDesignPackages] = useState<Record<string, string>>({});
  const [giteaRepo, setGiteaRepo] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`/api/projects/${projectId}/apps`)
      .then((r) => r.json())
      .then((d) => {
        setApps(d.apps ?? []);
        setDesignPackages(d.designPackages ?? {});
        setGiteaRepo(d.giteaRepo ?? null);
      })
      .catch(() => toast.error("Failed to load apps"))
      .finally(() => setLoading(false));
  }, [projectId]);

  const handleSelect = async (appName: string, packageId: string) => {
    try {
      const res = await fetch(`/api/projects/${projectId}/apps`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ appName, packageId }),
      });
      if (!res.ok) throw new Error("Save failed");
      setDesignPackages((prev) => ({ ...prev, [appName]: packageId }));
      const pkg = PACKAGES.find((p) => p.id === packageId);
      toast.success(`${appName} → ${pkg?.name ?? packageId}`);
    } catch {
      toast.error("Failed to save selection");
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-32">
        <Loader2 className="h-7 w-7 animate-spin text-muted-foreground" />
      </div>
    );
  }

  return (
    <div className="space-y-10 p-6 max-w-5xl mx-auto">

      {/* Header */}
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-xl font-bold">Design packages</h1>
          <p className="text-sm text-muted-foreground mt-0.5">
            Each app in your Turborepo can use a different UI library — they never conflict.
          </p>
        </div>
        {giteaRepo && (
          <a
            href={`https://git.vibnai.com/${giteaRepo}/src/branch/main/apps`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Button variant="outline" size="sm" className="gap-1.5">
              <ExternalLink className="h-3.5 w-3.5" />
              View apps in Gitea
            </Button>
          </a>
        )}
      </div>

      {/* App sections */}
      {apps.length === 0 ? (
        <div className="rounded-xl border border-dashed p-12 text-center">
          <Package className="h-8 w-8 text-muted-foreground mx-auto mb-3" />
          <p className="text-sm font-medium">No apps found</p>
          <p className="text-xs text-muted-foreground mt-1">
            Push a Turborepo scaffold to your Gitea repo — apps in the{" "}
            <code className="font-mono">apps/</code> directory will appear here.
          </p>
        </div>
      ) : (
        <div className="space-y-12">
          {apps.map((app) => (
            <div key={app.name} className="space-y-1">
              <AppSection
                appName={app.name}
                selectedPackageId={designPackages[app.name]}
                onSelect={handleSelect}
              />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}