import { ExternalLink, Globe } from "@/components/ui/icons";
import { Badge } from "@/components/ui/badge";
import { EmptyState } from "@/components/ui/empty-state";
import type { ClientSite } from "@/lib/mock-data";
import { formatDate } from "@/lib/format";

export function SitePreview({ site }: { site: ClientSite | null }) {
  if (!site) {
    return (
      <div className="panel">
        <EmptyState
          icon={Globe}
          title="Aucun site connecté"
          description="L'aperçu de votre site apparaîtra ici une fois la mise en ligne effectuée."
        />
      </div>
    );
  }

  return (
    <div className="panel overflow-hidden group">
      {/* Mockup browser frame */}
      <div className="border-b border-border bg-surface-2">
        <div className="flex items-center gap-2 px-4 py-2.5">
          <span className="size-2.5 rounded-full bg-stone-300" />
          <span className="size-2.5 rounded-full bg-stone-300" />
          <span className="size-2.5 rounded-full bg-stone-300" />
          <div className="flex-1 mx-3 h-6 bg-background border border-border rounded text-xxs text-text-dim flex items-center gap-1.5 px-2.5">
            <Globe className="size-3 text-accent" />
            <span className="font-mono">https://{site.domain}</span>
            <span className="ml-auto size-1 rounded-full bg-success" />
          </div>
          <a
            href={`https://${site.domain}`}
            target="_blank"
            rel="noopener noreferrer"
            className="size-6 rounded inline-flex items-center justify-center text-text-dim hover:text-accent hover:bg-stone-900/[0.05]"
            aria-label="Ouvrir le site"
          >
            <ExternalLink className="size-3.5" />
          </a>
        </div>
      </div>

      {/* Faux rendu de site, placeholder visuel */}
      <div className="relative aspect-[16/9] bg-surface-2 overflow-hidden">
        <div className="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-background/60 to-transparent" />

        <div className="relative h-full flex flex-col justify-center px-12">
          <div className="text-micro uppercase tracking-[0.2em] text-accent font-semibold">
            {site.thumbnailLabel}
          </div>
          <div className="mt-2 text-2xl md:text-3xl font-semibold tracking-tight text-text leading-tight max-w-md">
            Vous accompagner dans
            <br />
            chaque étape de votre vie.
          </div>
          <div className="mt-4 flex gap-2">
            <div className="h-6 w-24 rounded bg-accent/20 border border-accent/40" />
            <div className="h-6 w-20 rounded bg-stone-900/[0.05] border border-border" />
          </div>
        </div>
      </div>

      {/* Footer meta */}
      <div className="px-5 py-3.5 flex items-center justify-between gap-4">
        <div className="flex items-center gap-3 min-w-0">
          <Badge tone={site.status === "en_ligne" ? "success" : "warning"} dot>
            {site.status === "en_ligne" ? "En ligne" : "Maintenance"}
          </Badge>
          <span className="text-xs text-text-dim truncate">
            Disponibilité {site.uptime}% · Dernière mise en ligne le {formatDate(site.lastDeployAt)}
          </span>
        </div>
      </div>
    </div>
  );
}