"use client";

import { useState, type FormEvent } from "react";
import { Copy, Check } from "lucide-react";
import { createApiTokenAction } from "./_actions";

export function TokenForm({ allScopes }: { allScopes: readonly string[] }) {
  const [creating, setCreating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [created, setCreated] = useState<{ token: string; prefix: string } | null>(null);
  const [copied, setCopied] = useState(false);

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setCreating(true);
    const fd = new FormData(e.currentTarget);
    const result = await createApiTokenAction(fd);
    setCreating(false);
    if (!result.ok) {
      setError(result.error);
      return;
    }
    setCreated({ token: result.token, prefix: result.prefix });
    e.currentTarget.reset();
  }

  async function copyToken() {
    if (!created) return;
    await navigator.clipboard.writeText(created.token);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  if (created) {
    return (
      <div className="space-y-4">
        <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3">
          <p className="text-sm text-emerald-300 font-semibold mb-1">Token đã tạo — copy ngay!</p>
          <p className="text-xs text-emerald-400/80">
            Token sẽ KHÔNG hiển thị lại. Lưu vào nơi an toàn (1Password, .env, vault…).
          </p>
        </div>
        <div className="flex gap-2 items-stretch">
          <code className="flex-1 rounded-lg border border-stroke-subtle bg-bg-overlay px-3 py-2 text-xs font-mono break-all text-ink-primary">
            {created.token}
          </code>
          <button
            type="button"
            onClick={copyToken}
            className="rounded-lg border border-stroke-subtle bg-bg-elevated px-3 py-2 hover:bg-bg-overlay transition flex items-center gap-1.5 text-sm shrink-0"
          >
            {copied ? (
              <>
                <Check className="h-4 w-4 text-emerald-400" /> Đã copy
              </>
            ) : (
              <>
                <Copy className="h-4 w-4" /> Copy
              </>
            )}
          </button>
        </div>
        <button
          type="button"
          onClick={() => setCreated(null)}
          className="text-sm text-brand hover:underline"
        >
          ← Tạo token khác
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} className="space-y-4">
      <div className="grid gap-3 md:grid-cols-2">
        <Field label="Tên / mô tả" htmlFor="name">
          <input
            name="name"
            id="name"
            required
            placeholder="Bot đăng tin Crypto"
            className="w-full rounded-lg border border-stroke-subtle bg-bg-overlay px-3 py-2 text-sm"
          />
        </Field>
        <Field label="Môi trường" htmlFor="env">
          <select
            name="env"
            id="env"
            defaultValue="live"
            className="w-full rounded-lg border border-stroke-subtle bg-bg-overlay px-3 py-2 text-sm"
          >
            <option value="live">live</option>
            <option value="test">test</option>
          </select>
        </Field>
      </div>

      <fieldset>
        <legend className="text-sm font-medium text-ink-secondary mb-2">Scopes</legend>
        <div className="grid gap-2 grid-cols-2 md:grid-cols-4">
          {allScopes.map((s) => (
            <label
              key={s}
              className="flex items-center gap-2 rounded-lg border border-stroke-subtle bg-bg-overlay px-3 py-2 text-xs cursor-pointer hover:border-brand/40"
            >
              <input
                type="checkbox"
                name="scopes"
                value={s}
                defaultChecked={s === "post:read" || s === "post:write" || s === "post:publish"}
                className="accent-brand"
              />
              <span className="font-mono">{s}</span>
            </label>
          ))}
        </div>
      </fieldset>

      <div className="grid gap-3 md:grid-cols-2">
        <Field label="IP allowlist (tùy chọn, phẩy ngăn cách)" htmlFor="ipAllowlist">
          <input
            name="ipAllowlist"
            id="ipAllowlist"
            placeholder="192.168., 203.0.113.42"
            className="w-full rounded-lg border border-stroke-subtle bg-bg-overlay px-3 py-2 text-sm font-mono"
          />
        </Field>
        <Field label="Hết hạn sau (ngày, 0 = không hết hạn)" htmlFor="expiresInDays">
          <input
            name="expiresInDays"
            id="expiresInDays"
            type="number"
            min={0}
            max={3650}
            defaultValue={0}
            className="w-full rounded-lg border border-stroke-subtle bg-bg-overlay px-3 py-2 text-sm"
          />
        </Field>
      </div>

      {error ? (
        <div className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-300">
          {error}
        </div>
      ) : null}

      <button
        type="submit"
        disabled={creating}
        className="rounded-lg bg-brand text-white px-5 py-2 text-sm font-semibold hover:bg-brand-dark disabled:opacity-50"
      >
        {creating ? "Đang tạo…" : "Tạo token"}
      </button>
    </form>
  );
}

function Field({ label, htmlFor, children }: { label: string; htmlFor: string; children: React.ReactNode }) {
  return (
    <div>
      <label htmlFor={htmlFor} className="block text-sm font-medium text-ink-secondary mb-1">
        {label}
      </label>
      {children}
    </div>
  );
}