import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { KeyRound, ArrowLeft, AlertTriangle } from "lucide-react";
import { createClient } from "@/lib/supabase/server";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { formatPriceHT, formatPriceTTC } from "@/lib/utils";
import AddToCartButton from "@/components/catalogue/add-to-cart-button";

interface PageProps {
  params: { id: string };
}

function listRules(product: Awaited<ReturnType<typeof getProduct>>) {
  if (!product) return [];
  const rules: { label: string; required: boolean; hint?: string }[] = [];
  if (product.numero_cle_obligatoire)
    rules.push({ label: "Numéro / indice gravé sur la clé", required: true });
  if (product.carte_proprio_obligatoire)
    rules.push({ label: "Carte de propriété obligatoire", required: true });
  if (product.commande_bloquee_sans_carte)
    rules.push({
      label: "Commande impossible sans carte de propriété",
      required: true,
      hint: "Spécificité fabricant",
    });
  if (product.attestation_fabricant_si_pas_carte)
    rules.push({ label: "Attestation fabricant", required: false, hint: "Si pas de carte" });
  if (product.attestation_honneur_si_pas_carte)
    rules.push({ label: "Attestation sur l'honneur", required: false, hint: "Si pas de carte" });
  if (product.justif_domicile_si_pas_carte)
    rules.push({ label: "Justificatif de domicile < 3 mois", required: false, hint: "Si pas de carte" });
  if (product.cni_si_pas_carte)
    rules.push({ label: "Photo CNI recto/verso", required: false, hint: "Si pas de carte" });
  if (product.photo_cle_obligatoire)
    rules.push({ label: "Photo recto/verso de la clé", required: true });
  if (product.cle_originale_si_pas_carte)
    rules.push({ label: "Clé originale + justificatif", required: false, hint: "Si indice absent et pas de carte" });
  return rules;
}

async function getProduct(id: string) {
  const supabase = createClient();
  const { data } = await supabase.from("products").select("*").eq("id", id).single();
  return data;
}

export default async function ProductDetailPage({ params }: PageProps) {
  const product = await getProduct(params.id);
  if (!product) notFound();

  const rules = listRules(product);

  return (
    <div className="space-y-4">
      <Button asChild variant="ghost" size="sm" className="-ml-2">
        <Link href="/catalogue">
          <ArrowLeft className="h-4 w-4" /> Retour au catalogue
        </Link>
      </Button>

      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <div className="relative aspect-square w-full overflow-hidden rounded-lg bg-muted">
          {product.image_url ? (
            <Image
              src={product.image_url}
              alt={`${product.fabricant} ${product.modele}`}
              fill
              sizes="(max-width: 1024px) 100vw, 50vw"
              className="object-cover"
              priority
            />
          ) : (
            <div className="flex h-full items-center justify-center text-muted-foreground">
              <KeyRound className="h-24 w-24 opacity-30" />
            </div>
          )}
        </div>

        <div className="space-y-4">
          <div>
            <div className="text-sm font-medium uppercase tracking-wide text-muted-foreground">
              {product.fabricant}
            </div>
            <h1 className="text-3xl font-bold">{product.modele}</h1>
          </div>

          <Card>
            <CardContent className="grid grid-cols-2 gap-4 p-4">
              <div>
                <div className="text-xs uppercase tracking-wide text-muted-foreground">
                  Mon prix d&apos;achat HT
                </div>
                <div className="text-2xl font-bold text-primary">
                  {formatPriceHT(product.prix_ht)}
                </div>
              </div>
              <div className="text-right">
                <div className="text-xs uppercase tracking-wide text-muted-foreground">
                  Prix conseillé TTC
                </div>
                <div className="text-xl font-semibold">
                  {formatPriceTTC(product.prix_ttc_conseille)}
                </div>
              </div>
            </CardContent>
          </Card>

          <AddToCartButton product={product} />

          {product.commande_bloquee_sans_carte && (
            <div className="flex items-start gap-2 rounded-md border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900">
              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
              <div>
                <div className="font-semibold">Carte de propriété indispensable</div>
                <div>Ce modèle ne peut pas être commandé sans la carte de propriété.</div>
              </div>
            </div>
          )}

          <Separator />

          <div className="space-y-2">
            <h2 className="font-semibold">Documents requis pour la commande</h2>
            <ul className="space-y-1.5 text-sm">
              {rules.map((r, i) => (
                <li key={i} className="flex items-start gap-2">
                  <Badge variant={r.required ? "default" : "secondary"} className="mt-0.5">
                    {r.required ? "Obligatoire" : "Conditionnel"}
                  </Badge>
                  <div>
                    <div>{r.label}</div>
                    {r.hint && <div className="text-xs text-muted-foreground">{r.hint}</div>}
                  </div>
                </li>
              ))}
            </ul>
          </div>

          {product.carte_renouvelable && (
            <Card>
              <CardContent className="p-3 text-sm">
                <div className="font-medium">Carte renouvelable</div>
                <div className="text-muted-foreground">
                  Frais HT : {formatPriceHT(product.frais_renouvellement_ht)}
                </div>
              </CardContent>
            </Card>
          )}

          {product.commentaire && (
            <div className="rounded-md border bg-muted/40 p-3 text-sm">
              <div className="mb-1 font-semibold">Spécificités</div>
              <div className="whitespace-pre-line text-muted-foreground">{product.commentaire}</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}