"use client";

import { Download } from "lucide-react";
import type { SiteTagContext } from "@/lib/audit/types";

interface Props {
  brandName: string;
  website?: string;
  auditDate: string;
  score: number;
  pdfUrl: string;
  execPdfUrl?: string;
  viewMode?: string;
  siteTagContext?: SiteTagContext | null;
  services?: string[];
  locations?: string[];
  aiTrend?: number | null;
  isFirstParty?: boolean;
  subtitle?: string;
}

function scoreColor(s: number) {
  return s >= 80 ? "text-green-500" : s >= 60 ? "text-amber-500" : "text-red-500";
}

function SiteTagDot({ ctx }: { ctx: SiteTagContext }) {
  if (ctx.state === "active-mature") {
    return (
      <span className="inline-flex items-center gap-1.5 text-[11px] text-emerald-600">
        <span className="relative flex w-1.5 h-1.5 shrink-0">
          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
          <span className="relative inline-flex rounded-full w-1.5 h-1.5 bg-emerald-500" />
        </span>
        Site Tag active · {ctx.daysActive}+ days of data
      </span>
    );
  }
  if (ctx.state === "active-fresh") {
    return (
      <span className="inline-flex items-center gap-1.5 text-[11px] text-amber-600">
        <span className="w-1.5 h-1.5 rounded-full bg-amber-400 shrink-0" />
        Site Tag active · {ctx.daysActive} day{ctx.daysActive === 1 ? "" : "s"} of data
      </span>
    );
  }
  return (
    <span className="inline-flex items-center gap-1.5 text-[11px] text-slate-400">
      <span className="w-1.5 h-1.5 rounded-full bg-slate-300 shrink-0" />
      Site Tag silent
    </span>
  );
}

export function AuditHero({
  brandName, website, auditDate, score, pdfUrl, execPdfUrl, viewMode,
  siteTagContext, services, locations, aiTrend, subtitle,
}: Props) {
  const tags = [
    ...(services?.slice(0, 3) ?? []),
    ...(locations?.slice(0, 2) ?? []),
  ].filter(Boolean);

  return (
    <div id="audit-score" className="bg-white rounded-2xl border border-slate-200 p-6 sm:p-8 shadow-sm">
      <div className="flex items-start justify-between gap-6 flex-wrap">
        <div className="min-w-0 flex-1">
          <h1 className="text-3xl font-bold text-slate-900 tracking-tight leading-tight">
            {brandName}
          </h1>
          {website && (
            <p className="text-sm text-slate-500 mt-1">{website}</p>
          )}
          {subtitle && (
            <p className="text-xs text-slate-400 mt-1">{subtitle}</p>
          )}
          {tags.length > 0 && (
            <div className="flex flex-wrap gap-1.5 mt-2">
              {tags.map((t) => (
                <span key={t} className="text-[11px] text-slate-500 bg-slate-100 px-2 py-0.5 rounded-full">
                  {t}
                </span>
              ))}
            </div>
          )}
          {siteTagContext && (
            <div className="mt-2">
              <SiteTagDot ctx={siteTagContext} />
            </div>
          )}
          <p className="text-xs text-slate-400 mt-2">Audited {auditDate}</p>
        </div>

        <div className="flex flex-col items-end gap-3 shrink-0">
          <div className="text-right">
            <div className={`text-5xl font-black tabular-nums leading-none ${scoreColor(score)}`}>
              {score}
            </div>
            <div className="text-xs text-slate-400 mt-1">/ 100</div>
          </div>

          {aiTrend != null && (
            <div className="text-right">
              <div className={`text-lg font-bold tabular-nums leading-none ${aiTrend >= 0 ? "text-green-600" : "text-red-500"}`}>
                {aiTrend >= 0 ? "+" : ""}{aiTrend.toFixed(1)}%
              </div>
              <div className="text-[10px] text-slate-400 mt-0.5">AI traffic trend</div>
            </div>
          )}

          {execPdfUrl && viewMode === "executive" ? (
            <div className="flex flex-col items-end gap-1.5">
              <a
                href={execPdfUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-slate-900 text-white rounded-lg hover:bg-slate-700 transition-colors"
              >
                <Download className="w-3 h-3" />
                Executive Brief PDF
              </a>
              <a
                href={`${pdfUrl}?mode=comprehensive`}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-slate-500 hover:text-slate-800 transition-colors"
              >
                <Download className="w-3 h-3" />
                Full Audit PDF
              </a>
            </div>
          ) : execPdfUrl ? (
            <div className="flex flex-col items-end gap-1.5">
              <a
                href={`${pdfUrl}?mode=comprehensive`}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-slate-900 text-white rounded-lg hover:bg-slate-700 transition-colors"
              >
                <Download className="w-3 h-3" />
                Full Audit PDF
              </a>
              <a
                href={execPdfUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-slate-500 hover:text-slate-800 transition-colors"
              >
                <Download className="w-3 h-3" />
                Executive Brief PDF
              </a>
            </div>
          ) : (
            <a
              href={pdfUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-slate-900 text-white rounded-lg hover:bg-slate-700 transition-colors"
            >
              <Download className="w-3 h-3" />
              Download PDF
            </a>
          )}
        </div>
      </div>
    </div>
  );
}
