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

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useProduct } from "@/contexts/product-context"
import { brandForProduct } from "@/lib/product-brand"

/**
 * Builder-facing placeholder for products whose domain IA has not been
 * implemented yet. The shell, theme, route root, and product switcher work;
 * builders replace this body with product-owned routes and data.
 */
export default function ProductComingSoon() {
  const { product, customProductBrand, productBrandColors } = useProduct()
  const brand = brandForProduct(product, customProductBrand, productBrandColors)
  const productLabel = brand.label ?? `${brand.prefix ?? "Exxat"} ${brand.suffix}`

  return (
    <main
      className="flex flex-1 items-center justify-center p-6 md:p-12"
      aria-labelledby="product-shell-heading"
    >
      <div className="grid w-full max-w-4xl gap-6 lg:grid-cols-[1fr_0.85fr]">
        <div className="flex flex-col justify-center gap-4">
          <span
            aria-hidden="true"
            className="flex size-14 items-center justify-center rounded-2 bg-brand-tint text-2xl text-brand"
          >
            <i className="fa-light fa-compass-drafting" aria-hidden="true" />
          </span>
          <div className="space-y-2">
            <h1 id="product-shell-heading" className="text-2xl font-semibold tracking-tight text-foreground">
              {productLabel} shell is ready
            </h1>
            <p className="max-w-xl text-sm leading-6 text-muted-foreground">
              This product route is wired to the shared shell, theme, product switcher,
              and URL root. Replace the placeholder with product-owned pages when the
              domain workflow is defined.
            </p>
          </div>
          <div className="flex flex-wrap gap-3">
            <Button asChild>
              <Link to="/library/all">Open Library example</Link>
            </Button>
            <Button variant="outline" asChild>
              <Link to="/settings/organization">Configure product branding</Link>
            </Button>
          </div>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Keep the boundary clean</CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="grid gap-3 text-sm text-muted-foreground">
              <li className="flex gap-2">
                <i className="fa-light fa-check mt-1 text-brand" aria-hidden="true" />
                <span>Product logic belongs in routes, mocks, APIs, and feature modules.</span>
              </li>
              <li className="flex gap-2">
                <i className="fa-light fa-check mt-1 text-brand" aria-hidden="true" />
                <span>Reusable patterns move into the DS only after repeated need.</span>
              </li>
              <li className="flex gap-2">
                <i className="fa-light fa-check mt-1 text-brand" aria-hidden="true" />
                <span>All visual decisions route through tokens, not app-local colors.</span>
              </li>
            </ul>
          </CardContent>
        </Card>
      </div>
    </main>
  )
}
