import * as React from 'react';
import { useState } from 'react';
import { setToken } from '../api';

/**
 * Login screen — paste a session token (`mcpctl auth login` writes one to
 * ~/.mcpctl/credentials.json) or a PAT (`mcpctl_pat_*`). The token lives in
 * localStorage; logout wipes it. We don't validate the token shape here —
 * the first API call will 401 if it's wrong, and the user re-enters.
 */
export function Login({ onLogin }: { onLogin: () => void }): React.JSX.Element {
  const [value, setValue] = useState('');
  const [showHelp, setShowHelp] = useState(false);

  function submit(e: React.FormEvent): void {
    e.preventDefault();
    if (value.trim() === '') return;
    setToken(value.trim());
    onLogin();
  }

  return (
    <div style={styles.shell}>
      <form style={styles.card} onSubmit={submit}>
        <h1 style={styles.title}>mcpctl <span style={styles.dim}>prompt editor</span></h1>
        <p style={styles.hint}>Paste a session token or PAT.</p>
        <input
          type="password"
          autoFocus
          placeholder="mcpctl_pat_… or session token"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          style={styles.input}
        />
        <button type="submit" style={styles.button}>Continue</button>
        <button
          type="button"
          style={styles.linkButton}
          onClick={() => setShowHelp((s) => !s)}
        >
          {showHelp ? 'Hide help' : 'Where do I get a token?'}
        </button>
        {showHelp && (
          <pre style={styles.help}>
{`# Use your interactive session token (writes to ~/.mcpctl/credentials.json)
mcpctl auth login
cat ~/.mcpctl/credentials.json    # field: \`token\`

# Or mint a PAT for a specific project (longer-lived)
mcpctl create mcptoken my-editor --project my-project
`}
          </pre>
        )}
      </form>
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  shell: {
    minHeight: '100vh',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  card: {
    width: '100%',
    maxWidth: 420,
    background: '#161b22',
    border: '1px solid #30363d',
    borderRadius: 6,
    padding: 32,
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
  },
  title: {
    margin: 0,
    fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
    fontWeight: 700,
    fontSize: 20,
  },
  dim: { color: '#7d8590', fontWeight: 400 },
  hint: { margin: 0, color: '#7d8590' },
  input: {
    background: '#0d1117',
    color: '#c9d1d9',
    border: '1px solid #30363d',
    borderRadius: 4,
    padding: '8px 12px',
    fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
  },
  button: {
    background: '#238636',
    color: '#fff',
    border: 'none',
    borderRadius: 4,
    padding: '8px 12px',
    cursor: 'pointer',
    fontWeight: 600,
  },
  linkButton: {
    background: 'transparent',
    color: '#58a6ff',
    border: 'none',
    cursor: 'pointer',
    textAlign: 'left',
    padding: 0,
  },
  help: {
    background: '#0d1117',
    color: '#c9d1d9',
    padding: 12,
    borderRadius: 4,
    fontSize: 12,
    overflowX: 'auto',
    margin: 0,
  },
};
