import { Skeleton } from "@/components/ui/skeleton";

// ─── SERP data unavailable ────────────────────────────────────────────────────

export function SectionMissingSerpData() {
  return (
    <div className="flex flex-col items-center justify-center gap-3 py-10 px-6 bg-slate-50 border border-slate-200 border-dashed rounded-xl text-center">
      <svg className="w-8 h-8 text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
        <circle cx="11" cy="11" r="7" />
        <path d="M21 21l-4-4" strokeLinecap="round" />
      </svg>
      <div>
        <p className="text-[13px] font-semibold text-slate-600">Competitor data not available</p>
        <p className="text-[12px] text-slate-400 mt-0.5">Re-run the audit to collect SERP data for this brand.</p>
      </div>
    </div>
  );
}

// ─── Site Tag not installed / data unavailable ────────────────────────────────

export function SectionMissingSiteTag({ isInstalled = false }: { isInstalled?: boolean }) {
  if (isInstalled) {
    return (
      <div className="flex flex-col items-center justify-center gap-3 py-10 px-6 bg-slate-50 border border-slate-200 border-dashed rounded-xl text-center">
        <svg className="w-8 h-8 text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
          <circle cx="12" cy="12" r="9" />
          <path d="M12 7v5m0 3v.5" strokeLinecap="round" />
        </svg>
        <div>
          <p className="text-[13px] font-semibold text-slate-600">Data unavailable for this audit run</p>
          <p className="text-[12px] text-slate-400 mt-0.5 max-w-xs">
            Re-run the audit or check back after the next scheduled refresh.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col items-center justify-center gap-3 py-10 px-6 bg-slate-50 border border-slate-200 border-dashed rounded-xl text-center">
      <svg className="w-8 h-8 text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
        <circle cx="12" cy="12" r="9" />
        <circle cx="12" cy="12" r="3" fill="currentColor" />
      </svg>
      <div>
        <p className="text-[13px] font-semibold text-slate-600">Real-user data requires the meSEO Site Tag</p>
        <p className="text-[12px] text-slate-400 mt-0.5 max-w-xs">
          Install the tag to unlock behavioral signals, live session data, and predictive scoring.
        </p>
      </div>
      <button className="mt-1 inline-flex items-center gap-1.5 px-4 py-2 bg-white border border-slate-200 text-[12px] font-medium text-red-600 rounded-lg hover:border-red-200 hover:bg-red-50 transition-colors">
        Install Site Tag
        <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round">
          <path d="M2 5.5h7M6 3l3 2.5L6 8" />
        </svg>
      </button>
    </div>
  );
}

// ─── Degraded mode banner ─────────────────────────────────────────────────────

// Maps the stored crawlErrorReason token to a one-line diagnostic visible in
// the banner. These strings are user-facing -- keep them actionable, no jargon.
function crawlReasonDetail(reason: string): string {
  switch (reason) {
    case "crawl_blocked":
      return "The target site returned an access-denied response to the crawler -- bot protection (Cloudflare, WAF, or robots.txt) is likely blocking automated access.";
    case "crawl_timeout":
      return "The crawler did not finish within the 300-second budget -- the site may be slow or require many render cycles per page.";
    case "site_unreachable":
      return "The crawler could not reach the site -- verify the URL is correct and the site is online.";
    case "js_required":
      return "The site requires JavaScript to render and the crawler received empty HTML -- consider installing the Site Tag for first-party access.";
    case "redirect_loop":
      return "The crawler encountered a redirect chain it could not resolve -- check for SSL or www redirect conflicts.";
    case "firecrawl_service_error":
      return "The crawl service returned a 5xx error -- this is typically transient; re-running the audit should resolve it.";
    default:
      return "";
  }
}

export function SectionDegradedMode({ crawlErrorReason }: { crawlErrorReason?: string }) {
  const detail = crawlErrorReason ? crawlReasonDetail(crawlErrorReason) : "";
  return (
    <div className="flex items-start gap-3 bg-amber-50 border border-amber-200 rounded-xl px-4 py-3 text-[13px]">
      <svg className="w-4 h-4 text-amber-500 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
        <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" strokeLinejoin="round" />
        <line x1="12" y1="9" x2="12" y2="13" strokeLinecap="round" />
        <line x1="12" y1="17" x2="12.01" y2="17" strokeLinecap="round" />
      </svg>
      <span className="text-amber-800 flex-1">
        <span className="font-semibold">This audit ran in limited mode. </span>
        {detail
          ? detail
          : "The site crawler was unable to access your pages, so on-page structural findings and visual annotations are unavailable."
        }
        {" "}Behavioral, SERP, and AI attribution data are still populated from your Site Tag and search data. Re-run the audit for full crawl coverage.
      </span>
    </div>
  );
}

// ─── No audit run yet ─────────────────────────────────────────────────────────

export function SectionNoAudit({ brandName }: { brandName: string }) {
  return (
    <div className="flex flex-col items-center justify-center gap-3 py-16 text-center">
      <svg className="w-10 h-10 text-slate-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1}>
        <path d="M9 17H7A5 5 0 017 7h2" strokeLinecap="round" />
        <path d="M15 7h2a5 5 0 010 10h-2" strokeLinecap="round" />
        <line x1="8" y1="12" x2="16" y2="12" />
      </svg>
      <div>
        <p className="text-[15px] font-semibold text-slate-700">No audit yet for {brandName || "this brand"}</p>
        <p className="text-[13px] text-slate-400 mt-1">Run the audit to see your technical SEO health score.</p>
      </div>
    </div>
  );
}

// ─── Loading skeleton ─────────────────────────────────────────────────────────

export function SectionLoading() {
  return (
    <div className="bg-white border border-slate-200 rounded-xl p-7 shadow-subtle space-y-4">
      <Skeleton className="h-4 w-40" />
      <Skeleton className="h-8 w-24" />
      <Skeleton className="h-3 w-full" />
      <Skeleton className="h-3 w-4/5" />
    </div>
  );
}
