"use client";

import { useState, useTransition } from "react";
import { CheckCircle2, AlertTriangle, XCircle, ExternalLink } from "lucide-react";
import { validateSchemaAction, type ValidateResult } from "./_actions";

const SITE = "https://v2.finzone.io.vn";

export function ValidatorClient() {
  const [url, setUrl] = useState(SITE);
  const [pending, startTransition] = useTransition();
  const [result, setResult] = useState<ValidateResult | null>(null);

  function run(e?: React.FormEvent) {
    e?.preventDefault();
    setResult(null);
    startTransition(async () => {
      const r = await validateSchemaAction(url.trim());
      setResult(r);
    });
  }

  return (
    <div className="space-y-4">
      <form
        onSubmit={run}
        className="flex gap-2 rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-3"
      >
        <input
          type="url"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          placeholder="https://v2.finzone.io.vn/..."
          className="flex-1 px-3 py-2 rounded-lg bg-bg-base border border-stroke-subtle text-sm focus:outline-none focus:border-accent-primary"
        />
        <button
          type="submit"
          disabled={pending}
          className="px-4 py-2 rounded-lg bg-accent-primary text-bg-base text-sm font-medium hover:opacity-90 disabled:opacity-50"
        >
          {pending ? "Đang quét…" : "Validate"}
        </button>
      </form>

      {result?.error && (
        <div className="rounded-xl border border-rose-500/30 bg-rose-500/10 text-rose-300 px-4 py-3 text-sm">
          ❌ {result.error}
        </div>
      )}

      {result?.ok && (
        <>
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
            <Stat label="JSON-LD blocks" value={result.rawBlocks ?? 0} />
            <Stat label="Items" value={result.items?.length ?? 0} />
            <Stat
              label="Errors"
              value={
                result.items?.reduce(
                  (n, i) => n + i.checks.filter((c) => c.level === "error").length,
                  0,
                ) ?? 0
              }
              tone="text-rose-300"
            />
            <Stat
              label="Warnings"
              value={
                result.items?.reduce(
                  (n, i) => n + i.checks.filter((c) => c.level === "warn").length,
                  0,
                ) ?? 0
              }
              tone="text-amber-300"
            />
          </div>

          {(result.pageTitle || result.pageDescription) && (
            <div className="rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-4">
              <div className="text-[10px] uppercase tracking-wider text-ink-muted mb-1">
                Meta tags
              </div>
              {result.pageTitle && (
                <div className="text-sm">
                  <span className="text-ink-muted">title:</span>{" "}
                  <span className="font-medium">{result.pageTitle}</span>
                </div>
              )}
              {result.pageDescription && (
                <div className="text-sm mt-1">
                  <span className="text-ink-muted">description:</span>{" "}
                  <span className="text-ink-secondary">{result.pageDescription}</span>
                </div>
              )}
            </div>
          )}

          <div className="space-y-3">
            {result.items?.length === 0 ? (
              <div className="rounded-xl border border-amber-500/30 bg-amber-500/10 text-amber-300 px-4 py-3 text-sm">
                ⚠ Trang không có JSON-LD nào.
              </div>
            ) : (
              result.items?.map((item, i) => (
                <ItemCard key={i} item={item} index={i + 1} />
              ))
            )}
          </div>

          <div className="text-[11px] text-ink-muted">
            Quét lúc {new Date(result.fetchedAt!).toLocaleString("vi-VN")} ·{" "}
            <a
              href={result.url}
              target="_blank"
              rel="noopener noreferrer"
              className="text-accent-primary hover:underline inline-flex items-center gap-1"
            >
              {result.url} <ExternalLink className="h-3 w-3" />
            </a>
            {" · "}
            <a
              href={`https://search.google.com/test/rich-results?url=${encodeURIComponent(result.url ?? "")}`}
              target="_blank"
              rel="noopener noreferrer"
              className="text-accent-primary hover:underline"
            >
              Google Rich Results Test ↗
            </a>
          </div>
        </>
      )}
    </div>
  );
}

function Stat({
  label,
  value,
  tone = "text-emerald-300",
}: {
  label: string;
  value: number;
  tone?: string;
}) {
  return (
    <div className="rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-4">
      <div className="text-xs text-ink-muted">{label}</div>
      <div className={`text-2xl font-display font-bold mt-1 ${tone}`}>{value}</div>
    </div>
  );
}

function ItemCard({
  item,
  index,
}: {
  item: ValidateResult["items"] extends Array<infer T> | undefined ? T : never;
  index: number;
}) {
  const [open, setOpen] = useState(false);
  const errs = item.checks.filter((c) => c.level === "error").length;
  const warns = item.checks.filter((c) => c.level === "warn").length;

  return (
    <div className="rounded-xl border border-stroke-subtle bg-bg-elevated/40 overflow-hidden">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="w-full px-4 py-3 flex items-center gap-3 hover:bg-bg-overlay/40"
      >
        <span className="shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-lg bg-bg-overlay text-xs font-mono text-ink-muted">
          #{index}
        </span>
        <span className="font-medium text-sm">{item.type}</span>
        <div className="ml-auto flex items-center gap-1.5 text-xs">
          {errs > 0 ? (
            <span className="px-1.5 py-0.5 rounded bg-rose-500/15 text-rose-300">
              {errs} error
            </span>
          ) : (
            <span className="px-1.5 py-0.5 rounded bg-emerald-500/15 text-emerald-300">
              ok
            </span>
          )}
          {warns > 0 && (
            <span className="px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-300">
              {warns} warn
            </span>
          )}
          <span className="text-ink-muted">{open ? "▾" : "▸"}</span>
        </div>
      </button>
      {open && (
        <div className="border-t border-stroke-subtle/60 p-4 space-y-2">
          <ul className="space-y-1.5">
            {item.checks.map((c, i) => (
              <li key={i} className="flex items-start gap-2 text-xs">
                {c.level === "ok" ? (
                  <CheckCircle2 className="h-3.5 w-3.5 text-emerald-300 shrink-0 mt-0.5" />
                ) : c.level === "warn" ? (
                  <AlertTriangle className="h-3.5 w-3.5 text-amber-300 shrink-0 mt-0.5" />
                ) : (
                  <XCircle className="h-3.5 w-3.5 text-rose-300 shrink-0 mt-0.5" />
                )}
                <span className="text-ink-secondary">{c.message}</span>
              </li>
            ))}
          </ul>
          <details className="mt-3">
            <summary className="text-xs text-ink-muted cursor-pointer hover:text-ink-primary">
              Raw JSON
            </summary>
            <pre className="mt-2 text-[10px] bg-bg-base border border-stroke-subtle rounded p-2 overflow-x-auto leading-snug">
              {JSON.stringify(item.raw, null, 2)}
            </pre>
          </details>
        </div>
      )}
    </div>
  );
}