"use client"

import { Link } from "react-router-dom"

import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { SettingsAppearanceCard } from "@/components/settings-appearance-card"
import { useProductOrganizationSettingsHref } from "@/contexts/product-route-sync"

const STUDIO_RITUALS = [
  {
    title: "Catalog sync",
    status: "Dev only",
    icon: "fa-file-code",
    description:
      "Builder edits stream to public/tenant-products.json so the next teammate sees the same products.",
  },
  {
    title: "Route roots",
    status: "Namespaced",
    icon: "fa-route",
    description:
      "Each product gets a dedicated URL root and persistKey so state never leaks across products.",
  },
  {
    title: "Commit checklist",
    status: "Pre-flight",
    icon: "fa-list-check",
    description:
      "Reminders for nav, scope, persona, and tenant-products.json updates before you hand work off.",
  },
  {
    title: "Onboarding handoff",
    status: "First-run",
    icon: "fa-arrow-right-from-bracket",
    description:
      "Builders ship the onboarding flow at /builder/onboarding so end users land in a configured product.",
  },
] as const

/**
 * Product Studio body. Same shell as `SettingsOrganizationClient` —
 * IvyPresto H1, lead paragraph, ritual cards, then the canonical
 * `SettingsAppearanceCard` authoring widget.
 */
export function ProductStudioClient() {
  const organizationSettingsHref = useProductOrganizationSettingsHref()

  return (
    <div className="flex w-full min-w-0 flex-col">
      <div>
        <h1
          className="text-2xl font-semibold tracking-tight leading-tight text-foreground"
          style={{ fontFamily: "var(--font-heading)" }}
        >
          Product Studio
        </h1>
        <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
          The official path for adding tenant products — identity, theme, route root, visibility,
          starter hubs, and generated files from one deterministic workflow. End-user product
          branding still lives in{" "}
          <Link
            to={organizationSettingsHref}
            className="text-brand underline-offset-4 hover:underline"
          >
            organization settings
          </Link>
          .
        </p>
      </div>

      <div className="mt-10 grid gap-4 sm:grid-cols-2">
        {STUDIO_RITUALS.map(ritual => (
          <Card key={ritual.title}>
            <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0">
              <div className="flex items-center gap-3">
                <span className="flex size-9 items-center justify-center rounded-2 bg-brand-tint text-brand">
                  <i className={`fa-light ${ritual.icon}`} aria-hidden="true" />
                </span>
                <CardTitle className="text-base">{ritual.title}</CardTitle>
              </div>
              <Badge variant="secondary">{ritual.status}</Badge>
            </CardHeader>
            <CardContent>
              <p className="text-sm leading-6 text-muted-foreground">{ritual.description}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="mt-8">
        <SettingsAppearanceCard mode="products-only" />
      </div>
    </div>
  )
}
