"use client";

import type { EeatAudit } from "@/lib/audit/data-sources/eeat-audit";

interface Props {
  eeatAudit: EeatAudit | null | undefined;
}

const WEIGHT_CONFIG = {
  critical: { label: "Critical Industry Weight", class: "bg-red-500/20 text-red-400 border border-red-500/30" },
  high: { label: "High Industry Weight", class: "bg-orange-500/20 text-orange-400 border border-orange-500/30" },
  moderate: { label: "Moderate Industry Weight", class: "bg-amber-500/20 text-amber-400 border border-amber-500/30" },
  low: { label: "Low Industry Weight", class: "bg-slate-500/20 text-slate-400 border border-slate-500/30" },
} as const;

const DIFFICULTY_CONFIG = {
  easy: { label: "Easy", class: "bg-emerald-500/15 text-emerald-400" },
  moderate: { label: "Moderate", class: "bg-amber-500/15 text-amber-400" },
  hard: { label: "Hard", class: "bg-red-500/15 text-red-400" },
} as const;

const DIM_CONFIG = {
  experience: { label: "Experience", icon: "👤", color: "from-blue-500/20 to-blue-500/5 border-blue-500/20" },
  expertise: { label: "Expertise", icon: "🎓", color: "from-violet-500/20 to-violet-500/5 border-violet-500/20" },
  authoritativeness: { label: "Authoritativeness", icon: "🏆", color: "from-amber-500/20 to-amber-500/5 border-amber-500/20" },
  trustworthiness: { label: "Trustworthiness", icon: "🔒", color: "from-emerald-500/20 to-emerald-500/5 border-emerald-500/20" },
} as const;

function scoreColor(score: number): string {
  if (score >= 70) return "text-emerald-400";
  if (score >= 45) return "text-amber-400";
  return "text-red-400";
}

function ScoreGauge({ score }: { score: number }) {
  const pct = Math.min(100, Math.max(0, score));
  const color = score >= 70 ? "bg-emerald-500" : score >= 45 ? "bg-amber-500" : "bg-red-500";
  return (
    <div className="flex items-center gap-3">
      <div className="flex-1 h-2 bg-slate-700/60 rounded-full overflow-hidden">
        <div className={`h-full rounded-full ${color}`} style={{ width: `${pct}%` }} />
      </div>
      <span className={`text-sm font-bold w-12 text-right ${scoreColor(score)}`}>{score}/100</span>
    </div>
  );
}

interface DimSignals {
  score: number;
  detectedSignals: string[];
  missingSignals: string[];
}

function DimensionCard({
  dim,
  signals,
}: {
  dim: keyof typeof DIM_CONFIG;
  signals: DimSignals;
}) {
  const { label, icon, color } = DIM_CONFIG[dim];
  return (
    <div className={`rounded-xl bg-gradient-to-br ${color} border p-4 space-y-3`}>
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="text-base">{icon}</span>
          <span className="text-sm font-semibold text-slate-200">{label}</span>
        </div>
        <span className={`text-sm font-bold ${scoreColor(signals.score)}`}>{signals.score}/100</span>
      </div>

      <ScoreGauge score={signals.score} />

      {signals.detectedSignals.length > 0 && (
        <ul className="space-y-1">
          {signals.detectedSignals.slice(0, 3).map((s, i) => (
            <li key={i} className="flex items-start gap-2 text-xs text-slate-300">
              <span className="shrink-0 text-emerald-400 mt-0.5">✓</span>
              {s}
            </li>
          ))}
        </ul>
      )}

      {signals.missingSignals.length > 0 && (
        <ul className="space-y-1 border-t border-white/5 pt-2">
          {signals.missingSignals.slice(0, 3).map((s, i) => (
            <li key={i} className="flex items-start gap-2 text-xs text-slate-400">
              <span className="shrink-0 text-red-400 mt-0.5">✗</span>
              {s}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export function EeatAuditSection({ eeatAudit }: Props) {
  if (!eeatAudit) return null;

  const { compositeScore, industryWeight, experienceSignals, expertiseSignals, authoritativenessSignals, trustworthinessSignals, topGaps, industryContextNarrative } = eeatAudit;
  const weightConfig = WEIGHT_CONFIG[industryWeight];

  return (
    <section id="audit-eeat" className="space-y-6">
      {/* Header */}
      <div className="flex items-start justify-between flex-wrap gap-3">
        <div>
          <h2 className="text-lg font-semibold text-slate-100">E-E-A-T Audit</h2>
          <p className="text-sm text-slate-400 mt-1">
            Experience, Expertise, Authoritativeness, Trustworthiness — the framework AI engines use to assess content quality
          </p>
        </div>
        <div className="flex items-center gap-2">
          <span className={`text-xs font-semibold px-3 py-1.5 rounded-full ${weightConfig.class}`}>
            {weightConfig.label}
          </span>
        </div>
      </div>

      {/* Industry narrative */}
      <div className="rounded-xl bg-slate-900/60 border border-white/10 p-5">
        <p className="text-sm text-slate-300 leading-relaxed">{industryContextNarrative}</p>
      </div>

      {/* Composite score */}
      <div className="rounded-xl bg-slate-900/60 border border-white/10 p-5">
        <div className="flex items-center justify-between mb-3">
          <span className="text-sm font-semibold text-slate-200">Composite E-E-A-T Score</span>
          <span className={`text-2xl font-bold ${scoreColor(compositeScore)}`}>{compositeScore}/100</span>
        </div>
        <ScoreGauge score={compositeScore} />
      </div>

      {/* 4-quadrant dimension grid */}
      <div className="grid gap-4 sm:grid-cols-2">
        <DimensionCard dim="experience" signals={experienceSignals} />
        <DimensionCard dim="expertise" signals={expertiseSignals} />
        <DimensionCard dim="authoritativeness" signals={authoritativenessSignals} />
        <DimensionCard dim="trustworthiness" signals={trustworthinessSignals} />
      </div>

      {/* Top gaps */}
      {topGaps.length > 0 && (
        <div className="space-y-3">
          <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Top Gaps by Score Lift</h3>
          <div className="space-y-2">
            {topGaps.map((gap, i) => {
              const dim = DIM_CONFIG[gap.dimension];
              const diff = DIFFICULTY_CONFIG[gap.implementationDifficulty];
              return (
                <div key={i} className="rounded-xl bg-slate-900/60 border border-white/10 p-4 space-y-2">
                  <div className="flex items-start justify-between gap-3 flex-wrap">
                    <div className="flex items-center gap-2">
                      <span className="text-xs">{dim.icon}</span>
                      <span className="text-xs font-semibold text-slate-500 uppercase">{dim.label}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className={`text-xs font-semibold px-2 py-0.5 rounded ${diff.class}`}>{diff.label}</span>
                      <span className="text-xs font-bold text-emerald-400">+{gap.estimatedScoreLift} pts</span>
                    </div>
                  </div>
                  <p className="text-sm font-semibold text-slate-200">{gap.gap}</p>
                  <p className="text-xs text-slate-400 leading-relaxed">{gap.impactDescription}</p>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </section>
  );
}
