"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { ShieldCheck, AlertTriangle, AlertCircle, CheckCircle2 } from "lucide-react";

interface AuditData { gsc: unknown; health: number | null }

export default function ClientAuditPage() {
  const { brandId } = useParams();
  const [data, setData] = useState<AuditData | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Reuse the dashboard endpoint which includes health score
    fetch(`/api/client-portal/dashboard?brandId=${brandId}`)
      .then((r) => r.ok ? r.json() : null)
      .then((d) => setData(d))
      .finally(() => setLoading(false));
  }, [brandId]);

  if (loading) return <div className="flex items-center justify-center h-64"><div className="w-8 h-8 border-4 border-slate-200 border-t-slate-600 rounded-full animate-spin" /></div>;

  const health = data?.health;

  return (
    <div className="space-y-6 max-w-5xl">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Technical Audit</h1>
        <p className="text-slate-500 text-sm mt-1">Site health summary</p>
      </div>

      {/* Health Score */}
      <div className="bg-white rounded-xl border border-slate-200 px-6 py-8 text-center">
        <div className="relative w-24 h-24 mx-auto mb-4">
          <svg viewBox="0 0 64 64" className="w-24 h-24 -rotate-90">
            <circle cx="32" cy="32" r="27" fill="none" stroke="#e2e8f0" strokeWidth="6" />
            <circle cx="32" cy="32" r="27" fill="none" stroke={health != null && health >= 80 ? "#16a34a" : health != null && health >= 50 ? "#f59e0b" : "#ef4444"} strokeWidth="6" strokeLinecap="round"
              strokeDasharray={health != null ? `${(health / 100) * 169.6} 169.6` : "0 169.6"} />
          </svg>
          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <span className="text-2xl font-bold text-slate-900">{health ?? "—"}</span>
            <span className="text-[10px] text-slate-400">/100</span>
          </div>
        </div>
        <h2 className="text-lg font-bold text-slate-900 mb-1">
          {health != null && health >= 80 ? "Healthy" : health != null && health >= 50 ? "Needs Attention" : health != null ? "Critical Issues" : "No Audit Data"}
        </h2>
        <p className="text-sm text-slate-500 max-w-md mx-auto">
          {health != null
            ? "Your agency is actively monitoring and improving your site's technical SEO health."
            : "A technical audit hasn't been run yet. Your agency will set this up for you."}
        </p>
      </div>

      {/* Status cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <StatusCard icon={CheckCircle2} label="What's Working" color="text-green-600" bg="bg-green-50" desc="Core pages are crawlable, SSL is active, and mobile rendering is functioning correctly." />
        <StatusCard icon={AlertTriangle} label="Being Addressed" color="text-amber-600" bg="bg-amber-50" desc="Your agency is working on page speed optimizations and fixing minor crawl issues." />
        <StatusCard icon={AlertCircle} label="Monitoring" color="text-blue-600" bg="bg-blue-50" desc="Ongoing monitoring for broken links, indexing status changes, and Core Web Vitals." />
      </div>

      <div className="bg-brand-50 border border-brand-200 rounded-xl px-6 py-4">
        <p className="text-sm text-brand-800 font-medium">
          Your agency is actively managing your site&apos;s technical health. Contact them if you have specific concerns about your website.
        </p>
      </div>
    </div>
  );
}

function StatusCard({ icon: Icon, label, color, bg, desc }: { icon: typeof ShieldCheck; label: string; color: string; bg: string; desc: string }) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 px-5 py-4">
      <div className={`w-8 h-8 rounded-lg ${bg} flex items-center justify-center mb-3`}>
        <Icon className={`w-4 h-4 ${color}`} />
      </div>
      <h3 className="text-sm font-bold text-slate-900 mb-1">{label}</h3>
      <p className="text-xs text-slate-600 leading-relaxed">{desc}</p>
    </div>
  );
}
