/**
 * Access tokens card (mcp-ai-spec §6.2.3):
 * token table (label, prefix, scope, created, last used, revoke), create modal
 * with show-once secret, legacy WP-CLI token migration nag.
 */
import React, { useState } from 'react';
import { AlertTriangle, KeyRound, Loader2 } from 'lucide-react';
import type { McpCreatedToken, McpTokenInfo, McpTokenScope } from './types';
import { createToken, revokeToken } from './api';
import { McpCard } from './card';
import { ConfirmDialog, McpModal } from './modal';
import { CopyButton } from './copy-button';
import { Button } from '@/components/ui/button';
import { trackMcpTokenCreated, trackMcpTokenRevoked } from './tracking';
import { __ } from '../../lib/i18n';

function formatTs(ts: number): string {
  if (!ts) return '—';
  return new Date(ts * 1000).toLocaleString();
}

export function TokenManager({
  tokens,
  hasLegacyToken,
  onTokensChanged,
  onTokenCreated,
}: {
  tokens: McpTokenInfo[];
  hasLegacyToken: boolean;
  /** Refetch tokens + status after any mutation. */
  onTokensChanged: () => Promise<void>;
  /** Hands the plaintext secret up so connect guides can offer "copy with token". */
  onTokenCreated: (secret: string) => void;
}) {
  const [createOpen, setCreateOpen] = useState(false);
  const [revokeTarget, setRevokeTarget] = useState<McpTokenInfo | null>(null);
  const [legacyDeleteOpen, setLegacyDeleteOpen] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleRevoke = async (id: string, legacy: boolean) => {
    setBusy(true);
    setError(null);
    try {
      await revokeToken(id);
      trackMcpTokenRevoked(legacy);
      await onTokensChanged();
      setRevokeTarget(null);
      setLegacyDeleteOpen(false);
    } catch (e) {
      setError(
        e instanceof Error ? e.message : __('Failed to revoke token.', 'llmagnet-llm-txt-generator'),
      );
    } finally {
      setBusy(false);
    }
  };

  return (
    <McpCard
      title={__('Access tokens', 'llmagnet-llm-txt-generator')}
      description={__(
        "Tokens grant API access to this site's LLMagnet data. Treat them like passwords.",
        'llmagnet-llm-txt-generator',
      )}
      actions={
        <Button type="button" variant="default" size="sm" onClick={() => setCreateOpen(true)}>
          <KeyRound className="h-4 w-4" aria-hidden />
          {__('Create token', 'llmagnet-llm-txt-generator')}
        </Button>
      }
    >
      {hasLegacyToken && (
        <div
          className="mb-4 flex items-start gap-3 rounded-md border border-amber-200 bg-amber-50 p-3"
          role="status"
        >
          <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-600" aria-hidden />
          <div className="min-w-0 text-sm text-amber-900">
            <p className="font-medium">
              {__('Legacy token (set via WP-CLI) is active', 'llmagnet-llm-txt-generator')}
            </p>
            <p className="mt-0.5 text-xs leading-relaxed">
              {__(
                'It has full access and is stored in plaintext. Replace it with a managed token: create a named token above, update your clients, then delete the legacy one.',
                'llmagnet-llm-txt-generator',
              )}
            </p>
            <div className="mt-2 flex flex-wrap gap-2">
              <Button type="button" size="xs" onClick={() => setCreateOpen(true)} className="bg-amber-600 text-white hover:bg-amber-700">
                {__('Create named token', 'llmagnet-llm-txt-generator')}
              </Button>
              <Button type="button" variant="outline" size="xs" onClick={() => setLegacyDeleteOpen(true)} className="border-amber-300 text-amber-800 hover:bg-amber-100">
                {__('Delete legacy token', 'llmagnet-llm-txt-generator')}
              </Button>
            </div>
          </div>
        </div>
      )}

      {error && (
        <p className="mb-3 text-sm text-red-600" role="alert">
          {error}
        </p>
      )}

      {tokens.length === 0 && !hasLegacyToken ? (
        <p className="py-6 text-center text-sm text-gray-500">
          {__('No tokens yet. Create one to connect an AI client.', 'llmagnet-llm-txt-generator')}
        </p>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-gray-200 text-start text-xs uppercase tracking-wide text-gray-500">
                <th scope="col" className="py-2 pe-4 text-start font-medium">
                  {__('Label', 'llmagnet-llm-txt-generator')}
                </th>
                <th scope="col" className="py-2 pe-4 text-start font-medium">
                  {__('Token', 'llmagnet-llm-txt-generator')}
                </th>
                <th scope="col" className="py-2 pe-4 text-start font-medium">
                  {__('Scope', 'llmagnet-llm-txt-generator')}
                </th>
                <th scope="col" className="py-2 pe-4 text-start font-medium">
                  {__('Created', 'llmagnet-llm-txt-generator')}
                </th>
                <th scope="col" className="py-2 pe-4 text-start font-medium">
                  {__('Last used', 'llmagnet-llm-txt-generator')}
                </th>
                <th scope="col" className="py-2 text-start font-medium">
                  <span className="sr-only">{__('Actions', 'llmagnet-llm-txt-generator')}</span>
                </th>
              </tr>
            </thead>
            <tbody>
              {tokens.map((token) => (
                <tr key={token.id} className="border-b border-gray-100">
                  <td className="py-2.5 pe-4 font-medium text-gray-900">{token.label}</td>
                  <td className="py-2.5 pe-4">
                    <code dir="ltr" className="text-xs text-gray-600">
                      {token.prefix}…
                    </code>
                  </td>
                  <td className="py-2.5 pe-4">
                    <ScopeChip scope={token.scope} />
                  </td>
                  <td className="py-2.5 pe-4 text-gray-600">{formatTs(token.created_at)}</td>
                  <td className="py-2.5 pe-4 text-gray-600">
                    {token.last_used
                      ? formatTs(token.last_used)
                      : __('Never', 'llmagnet-llm-txt-generator')}
                  </td>
                  <td className="py-2.5 text-end">
                    <Button type="button" variant="destructive" size="xs" onClick={() => setRevokeTarget(token)}>
                      {__('Revoke', 'llmagnet-llm-txt-generator')}
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <CreateTokenModal
        open={createOpen}
        onClose={() => setCreateOpen(false)}
        onCreated={async (created) => {
          trackMcpTokenCreated(created.scope);
          onTokenCreated(created.secret);
          await onTokensChanged();
        }}
      />

      <ConfirmDialog
        open={revokeTarget !== null}
        title={__('Revoke token?', 'llmagnet-llm-txt-generator')}
        body={
          revokeTarget ? (
            <p>
              {__('Clients using', 'llmagnet-llm-txt-generator')}{' '}
              <strong>{revokeTarget.label}</strong> (
              <code dir="ltr" className="text-xs">{revokeTarget.prefix}…</code>){' '}
              {__(
                'will immediately lose access. This cannot be undone.',
                'llmagnet-llm-txt-generator',
              )}
            </p>
          ) : null
        }
        confirmLabel={__('Revoke token', 'llmagnet-llm-txt-generator')}
        destructive
        busy={busy}
        onConfirm={() => revokeTarget && void handleRevoke(revokeTarget.id, false)}
        onCancel={() => setRevokeTarget(null)}
      />

      <ConfirmDialog
        open={legacyDeleteOpen}
        title={__('Delete legacy token?', 'llmagnet-llm-txt-generator')}
        body={
          <p>
            {__(
              'The WP-CLI legacy token will stop working immediately. Make sure every client has been switched to a managed token first.',
              'llmagnet-llm-txt-generator',
            )}
          </p>
        }
        confirmLabel={__('Delete legacy token', 'llmagnet-llm-txt-generator')}
        destructive
        busy={busy}
        onConfirm={() => void handleRevoke('legacy', true)}
        onCancel={() => setLegacyDeleteOpen(false)}
      />
    </McpCard>
  );
}

function ScopeChip({ scope }: { scope: McpTokenScope }) {
  return (
    <span
      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
        scope === 'write' ? 'bg-purple-100 text-purple-800' : 'bg-blue-100 text-blue-800'
      }`}
    >
      {scope === 'write'
        ? __('Read-write', 'llmagnet-llm-txt-generator')
        : __('Read', 'llmagnet-llm-txt-generator')}
    </span>
  );
}

/**
 * Create flow: label + scope → POST → secret shown ONCE with copy button and
 * an explicit "I've saved my token" confirmation before the modal can close.
 */
function CreateTokenModal({
  open,
  onClose,
  onCreated,
}: {
  open: boolean;
  onClose: () => void;
  onCreated: (created: McpCreatedToken) => Promise<void>;
}) {
  const [label, setLabel] = useState('');
  const [scope, setScope] = useState<McpTokenScope>('read');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [created, setCreated] = useState<McpCreatedToken | null>(null);

  const reset = () => {
    setLabel('');
    setScope('read');
    setError(null);
    setCreated(null);
    setSubmitting(false);
  };

  const handleClose = () => {
    reset();
    onClose();
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!label.trim()) {
      setError(__('Please enter a label (e.g. "Claude Desktop").', 'llmagnet-llm-txt-generator'));
      return;
    }
    setSubmitting(true);
    setError(null);
    try {
      const result = await createToken(label.trim(), scope);
      setCreated(result);
      await onCreated(result);
    } catch (err) {
      setError(
        err instanceof Error
          ? err.message
          : __('Failed to create token.', 'llmagnet-llm-txt-generator'),
      );
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <McpModal
      open={open}
      title={
        created
          ? __('Token created', 'llmagnet-llm-txt-generator')
          : __('Create access token', 'llmagnet-llm-txt-generator')
      }
      onClose={handleClose}
      closeDisabled={created !== null}
    >
      {created ? (
        <div>
          <p className="text-sm text-gray-700">
            {__('Copy your new token now —', 'llmagnet-llm-txt-generator')}{' '}
            <strong className="text-red-700">
              {__("you won't be able to see it again.", 'llmagnet-llm-txt-generator')}
            </strong>
          </p>
          <div className="mt-3 flex items-center gap-2">
            <input
              type="text"
              readOnly
              value={created.secret}
              dir="ltr"
              aria-label={__('New token secret', 'llmagnet-llm-txt-generator')}
              onFocus={(e) => e.currentTarget.select()}
              data-autofocus
              className="flex-1 min-w-0 rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-xs font-mono text-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#9333ea]"
            />
            <CopyButton text={created.secret} label={__('Copy', 'llmagnet-llm-txt-generator')} />
          </div>
          <p className="mt-2 text-xs text-gray-500">
            {created.label} ·{' '}
            {created.scope === 'write'
              ? __('Read-write', 'llmagnet-llm-txt-generator')
              : __('Read', 'llmagnet-llm-txt-generator')}{' '}
            {__('scope · stored hashed on the server.', 'llmagnet-llm-txt-generator')}
          </p>
          <div className="mt-5 flex justify-end">
            <Button type="button" variant="default" size="sm" onClick={handleClose}>
              {__("I've saved my token", 'llmagnet-llm-txt-generator')}
            </Button>
          </div>
        </div>
      ) : (
        <form onSubmit={handleSubmit}>
          <label htmlFor="llmagnet-mcp-token-label" className="block text-sm font-medium text-gray-700">
            {__('Label', 'llmagnet-llm-txt-generator')}
          </label>
          <input
            id="llmagnet-mcp-token-label"
            type="text"
            value={label}
            onChange={(e) => setLabel(e.target.value)}
            placeholder={__('e.g. Claude Desktop', 'llmagnet-llm-txt-generator')}
            maxLength={80}
            data-autofocus
            className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#9333ea]"
          />

          <fieldset className="mt-4">
            <legend className="text-sm font-medium text-gray-700">
              {__('Scope', 'llmagnet-llm-txt-generator')}
            </legend>
            <div className="mt-1.5 space-y-1.5">
              <label className="flex items-center gap-2 text-sm text-gray-700">
                <input
                  type="radio"
                  name="llmagnet-mcp-token-scope"
                  checked={scope === 'read'}
                  onChange={() => setScope('read')}
                  className="h-4 w-4 shrink-0 appearance-none rounded-full border border-gray-300 bg-white checked:border-[#9333ea] checked:bg-[#9333ea] checked:shadow-[inset_0_0_0_3px_#fff] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#9333ea]"
                />
                <span>
                  <span className="font-medium">{__('Read', 'llmagnet-llm-txt-generator')}</span>{' '}
                  <span className="text-xs text-gray-500">
                    {__('— read-only tools (recommended).', 'llmagnet-llm-txt-generator')}
                  </span>
                </span>
              </label>
              <label className="flex items-center gap-2 text-sm text-gray-700">
                <input
                  type="radio"
                  name="llmagnet-mcp-token-scope"
                  checked={scope === 'write'}
                  onChange={() => setScope('write')}
                  className="h-4 w-4 shrink-0 appearance-none rounded-full border border-gray-300 bg-white checked:border-[#9333ea] checked:bg-[#9333ea] checked:shadow-[inset_0_0_0_3px_#fff] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#9333ea]"
                />
                <span>
                  <span className="font-medium">
                    {__('Read-write', 'llmagnet-llm-txt-generator')}
                  </span>{' '}
                  <span className="text-xs text-gray-500">
                    {__(
                      '— all tools, including future write actions.',
                      'llmagnet-llm-txt-generator',
                    )}
                  </span>
                </span>
              </label>
            </div>
          </fieldset>

          {error && (
            <p className="mt-3 text-sm text-red-600" role="alert">
              {error}
            </p>
          )}

          <div className="mt-5 flex justify-end gap-2">
            <Button type="button" variant="outline" size="sm" onClick={handleClose} disabled={submitting}>
              {__('Cancel', 'llmagnet-llm-txt-generator')}
            </Button>
            <Button type="submit" variant="default" size="sm" disabled={submitting}>
              {submitting && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
              {__('Create token', 'llmagnet-llm-txt-generator')}
            </Button>
          </div>
        </form>
      )}
    </McpModal>
  );
}