"use client";

import { useEffect, useState } from "react";
import type { AnalysisReport, AnalysisResult } from "@/lib/seo/analyzer";

export type LinkSuggestion = {
  slug: string;
  title: string;
  excerpt: string | null;
  score: number;
  reason: string;
};

const TYPE_COLORS: Record<AnalysisResult["type"], string> = {
  best: "text-emerald-300 border-emerald-500/40 bg-emerald-500/10",
  good: "text-emerald-300/80 border-emerald-500/30 bg-emerald-500/5",
  fair: "text-amber-300 border-amber-500/40 bg-amber-500/10",
  fail: "text-rose-300 border-rose-500/40 bg-rose-500/10",
  ok: "text-ink-secondary border-stroke-subtle",
  empty: "text-ink-muted border-stroke-subtle",
};

const GRADE_COLOR: Record<AnalysisReport["grade"], string> = {
  A: "text-emerald-300",
  B: "text-emerald-300/80",
  C: "text-amber-300",
  D: "text-orange-300",
  F: "text-rose-300",
};

export function SeoSidebar({ articleId }: { articleId: string }) {
  const [report, setReport] = useState<AnalysisReport | null>(null);
  const [suggestions, setSuggestions] = useState<LinkSuggestion[]>([]);
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [tab, setTab] = useState<"score" | "links">("score");

  async function refresh() {
    setLoading(true);
    setErr(null);
    try {
      const res = await fetch(`/api/admin/seo/analyze?articleId=${articleId}`, {
        cache: "no-store",
      });
      const data = (await res.json()) as
        | { ok: true; report: AnalysisReport; suggestions: LinkSuggestion[] }
        | { ok: false; error: string };
      if (!data.ok) {
        setErr(data.error);
      } else {
        setReport(data.report);
        setSuggestions(data.suggestions);
      }
    } catch (e) {
      setErr(e instanceof Error ? e.message : "Lỗi mạng.");
    }
    setLoading(false);
  }

  useEffect(() => {
    refresh();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [articleId]);

  return (
    <div className="rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-4">
      <div className="flex items-start justify-between gap-2 mb-3">
        <div>
          <h3 className="font-medium">Phân tích SEO</h3>
          <p className="text-xs text-ink-muted">Rank Math-style content analysis</p>
        </div>
        <button
          type="button"
          onClick={refresh}
          disabled={loading}
          className="text-xs px-2 py-1 rounded bg-bg-elevated border border-stroke-subtle hover:border-accent-primary/40 disabled:opacity-50"
        >
          {loading ? "…" : "↻"}
        </button>
      </div>

      <div className="flex gap-1.5 mb-4 border-b border-stroke-subtle/60">
        <button
          type="button"
          onClick={() => setTab("score")}
          className={`text-xs px-3 py-1.5 -mb-px border-b-2 ${
            tab === "score"
              ? "border-accent-primary text-accent-primary"
              : "border-transparent text-ink-muted hover:text-ink-primary"
          }`}
        >
          Điểm số ({report?.checks.length ?? 0})
        </button>
        <button
          type="button"
          onClick={() => setTab("links")}
          className={`text-xs px-3 py-1.5 -mb-px border-b-2 ${
            tab === "links"
              ? "border-accent-primary text-accent-primary"
              : "border-transparent text-ink-muted hover:text-ink-primary"
          }`}
        >
          Internal links ({suggestions.length})
        </button>
      </div>

      {err && (
        <div className="mb-3 text-xs text-rose-300 rounded bg-rose-500/10 border border-rose-500/30 px-2 py-1.5">
          {err}
        </div>
      )}

      {tab === "score" && report && (
        <>
          <div className="flex items-center gap-3 mb-4 pb-3 border-b border-stroke-subtle/60">
            <div
              className={`text-3xl font-bold font-display ${GRADE_COLOR[report.grade]}`}
            >
              {report.grade}
            </div>
            <div>
              <div className="text-xl font-semibold">{report.score}</div>
              <div className="text-xs text-ink-muted">/ 100</div>
            </div>
            <div className="ml-auto text-right text-xs text-ink-muted leading-tight">
              {report.stats.wordCount} từ · {report.stats.readMinutes} phút<br />
              {report.stats.subheadings} headings · {report.stats.images} ảnh<br />
              {report.stats.internalLinks} internal · {report.stats.externalLinks} external
              {report.stats.fleschScore !== null && (
                <>
                  <br />Flesch: {report.stats.fleschScore}
                </>
              )}
            </div>
          </div>

          <div className="space-y-2">
            {report.checks.map((c) => (
              <div
                key={c.id}
                className={`rounded-lg border p-2.5 text-xs ${TYPE_COLORS[c.type]}`}
              >
                <div className="flex items-start justify-between gap-2 mb-1">
                  <span className="font-medium">{c.title}</span>
                  <span className="shrink-0 font-mono">
                    {c.score}/{c.maxScore}
                  </span>
                </div>
                <p className="text-ink-secondary/90 leading-snug">{c.text}</p>
              </div>
            ))}
          </div>
        </>
      )}

      {tab === "links" && (
        <>
          {suggestions.length === 0 ? (
            <p className="text-xs text-ink-muted">
              {loading ? "Đang tìm…" : "Chưa tìm được bài liên quan để gắn internal link."}
            </p>
          ) : (
            <ul className="space-y-2.5">
              {suggestions.map((s) => (
                <li
                  key={s.slug}
                  className="rounded-lg border border-stroke-subtle bg-bg-elevated/60 p-2.5"
                >
                  <div className="flex items-start gap-2 mb-1">
                    <code className="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/15 text-emerald-300 font-mono shrink-0 mt-0.5">
                      {s.score}
                    </code>
                    <a
                      href={`/admin/articles?q=${encodeURIComponent(s.title)}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-xs font-medium text-ink-primary hover:text-accent-primary line-clamp-2"
                    >
                      {s.title}
                    </a>
                  </div>
                  <p className="text-[10px] text-ink-muted mb-1.5 italic">{s.reason}</p>
                  <button
                    type="button"
                    onClick={() => {
                      const md = `[${s.title}](/${s.slug})`;
                      navigator.clipboard.writeText(md);
                      alert(`Copied:\n${md}`);
                    }}
                    className="text-[11px] px-2 py-0.5 rounded bg-accent-primary/15 text-accent-primary hover:bg-accent-primary/25"
                  >
                    📋 Copy markdown link
                  </button>
                </li>
              ))}
            </ul>
          )}
        </>
      )}

      {!report && !err && !loading && (
        <p className="text-xs text-ink-muted">Nhấn ↻ để phân tích.</p>
      )}
    </div>
  );
}