"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import {
  unsubscribeAction,
  resubscribeAction,
  deleteSubscriberAction,
  importEmailsAction,
} from "./_actions";

export interface SubRow {
  id: string;
  email: string;
  status: string;
  source: string;
  confirmedAt: Date | null;
  unsubscribedAt: Date | null;
  createdAt: Date;
}

export function NewsletterTable({ rows }: { rows: SubRow[] }) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  const [filter, setFilter] = useState<"all" | "subscribed" | "unsubscribed" | "bounced">("all");
  const [q, setQ] = useState("");

  const visible = rows.filter((r) => {
    if (filter !== "all" && r.status !== filter) return false;
    if (q.trim() && !r.email.includes(q.trim().toLowerCase())) return false;
    return true;
  });

  function quick(fn: () => Promise<{ ok: boolean; error?: string }>) {
    startTransition(async () => {
      const res = await fn();
      if (!res.ok) alert(res.error ?? "Lỗi");
      else router.refresh();
    });
  }

  function exportCsv() {
    const lines = [
      "email,status,source,confirmed_at,unsubscribed_at,created_at",
      ...visible.map((r) =>
        [
          r.email,
          r.status,
          r.source,
          r.confirmedAt?.toISOString() ?? "",
          r.unsubscribedAt?.toISOString() ?? "",
          r.createdAt.toISOString(),
        ]
          .map((v) => (v.includes(",") ? `"${v.replace(/"/g, '""')}"` : v))
          .join(","),
      ),
    ];
    const blob = new Blob([lines.join("\n")], { type: "text/csv;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `newsletter-subscribers-${new Date().toISOString().slice(0, 10)}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  }

  return (
    <div>
      <div className="flex flex-wrap gap-2 items-center mb-5">
        <input
          type="search"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          placeholder="Tìm email…"
          className="flex-1 min-w-[220px] px-3 py-2 rounded-lg bg-bg-elevated border border-stroke-subtle text-sm focus:outline-none focus:border-accent-primary"
        />
        <select
          value={filter}
          onChange={(e) => setFilter(e.target.value as typeof filter)}
          className="px-3 py-2 rounded-lg bg-bg-elevated border border-stroke-subtle text-sm focus:outline-none focus:border-accent-primary"
        >
          <option value="all">Tất cả</option>
          <option value="subscribed">Đã subscribe</option>
          <option value="unsubscribed">Đã huỷ</option>
          <option value="bounced">Bounce</option>
        </select>
        <button
          type="button"
          onClick={exportCsv}
          className="px-4 py-2 rounded-lg bg-bg-elevated border border-stroke-subtle text-sm hover:border-accent-primary transition"
        >
          Xuất CSV ({visible.length})
        </button>
      </div>

      <ImportPanel pending={pending} startTransition={startTransition} />

      {visible.length === 0 ? (
        <div className="rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-8 text-center text-sm text-ink-muted">
          Không có subscriber nào khớp.
        </div>
      ) : (
        <div className="rounded-xl border border-stroke-subtle bg-bg-elevated/40 overflow-hidden">
          <div className="grid grid-cols-12 gap-3 px-4 py-3 text-xs font-medium text-ink-muted uppercase tracking-wider border-b border-stroke-subtle">
            <div className="col-span-5">Email</div>
            <div className="col-span-2">Trạng thái</div>
            <div className="col-span-2">Nguồn</div>
            <div className="col-span-2">Đăng ký</div>
            <div className="col-span-1 text-right">Hành động</div>
          </div>
          {visible.map((r) => (
            <div
              key={r.id}
              className="grid grid-cols-12 gap-3 px-4 py-3 text-sm border-b border-stroke-subtle/50 last:border-0"
            >
              <div className="col-span-5 font-mono text-xs truncate">{r.email}</div>
              <div className="col-span-2">
                <span
                  className={
                    r.status === "subscribed"
                      ? "px-1.5 py-0.5 rounded text-[10px] bg-emerald-500/10 text-emerald-300"
                      : r.status === "bounced"
                        ? "px-1.5 py-0.5 rounded text-[10px] bg-rose-500/10 text-rose-300"
                        : "px-1.5 py-0.5 rounded text-[10px] bg-stone-500/10 text-stone-300"
                  }
                >
                  {r.status}
                </span>
              </div>
              <div className="col-span-2 text-ink-muted text-xs">{r.source}</div>
              <div className="col-span-2 text-ink-muted text-xs">
                {r.createdAt.toLocaleDateString("vi-VN")}
              </div>
              <div className="col-span-1 flex justify-end gap-1.5">
                {r.status === "subscribed" ? (
                  <button
                    type="button"
                    disabled={pending}
                    onClick={() => quick(() => unsubscribeAction(r.id))}
                    className="text-xs text-amber-300 hover:underline"
                    title="Huỷ subscribe"
                  >
                    Huỷ
                  </button>
                ) : (
                  <button
                    type="button"
                    disabled={pending}
                    onClick={() => quick(() => resubscribeAction(r.id))}
                    className="text-xs text-emerald-300 hover:underline"
                    title="Subscribe lại"
                  >
                    ↺
                  </button>
                )}
                <button
                  type="button"
                  disabled={pending}
                  onClick={() => {
                    if (confirm(`Xoá ${r.email}?`)) quick(() => deleteSubscriberAction(r.id));
                  }}
                  className="text-xs text-rose-300 hover:underline"
                  title="Xoá"
                >
                  ✕
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function ImportPanel({
  pending,
  startTransition,
}: {
  pending: boolean;
  startTransition: (fn: () => void | Promise<void>) => void;
}) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [text, setText] = useState("");
  const [result, setResult] = useState<{ added: number; skipped: number } | null>(null);

  function onImport() {
    setResult(null);
    startTransition(async () => {
      const r = await importEmailsAction(text);
      if (!r.ok) {
        alert(r.error ?? "Lỗi import");
      } else {
        setResult({ added: r.added, skipped: r.skipped });
        setText("");
        router.refresh();
      }
    });
  }

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="mb-4 px-3 py-2 rounded-lg bg-bg-elevated border border-stroke-subtle text-sm hover:border-accent-primary transition"
      >
        + Import emails
      </button>
    );
  }

  return (
    <div className="mb-5 rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-4 space-y-3">
      <div className="flex items-center justify-between">
        <h3 className="font-medium text-sm">Import emails</h3>
        <button
          type="button"
          onClick={() => {
            setOpen(false);
            setText("");
            setResult(null);
          }}
          className="text-xs text-ink-muted hover:text-ink-primary"
        >
          ✕ Đóng
        </button>
      </div>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        rows={5}
        placeholder="Dán list email — phẩy, xuống dòng hoặc khoảng trắng đều được:&#10;a@b.com&#10;c@d.com, e@f.com"
        className="w-full px-3 py-2 rounded-lg bg-bg-base border border-stroke-subtle text-sm font-mono focus:outline-none focus:border-accent-primary"
      />
      <div className="flex items-center gap-3">
        <button
          type="button"
          disabled={pending || !text.trim()}
          onClick={onImport}
          className="px-4 py-2 rounded-lg bg-accent-primary text-white text-sm font-medium hover:bg-accent-primary/90 transition disabled:opacity-60"
        >
          {pending ? "Đang import…" : "Import"}
        </button>
        {result ? (
          <span className="text-xs text-ink-muted">
            Thêm <strong className="text-emerald-300">{result.added}</strong>, bỏ qua{" "}
            <strong className="text-amber-300">{result.skipped}</strong> (đã tồn tại).
          </span>
        ) : null}
      </div>
    </div>
  );
}