import { useState } from 'react';
import { QRCodeSVG } from 'qrcode.react';
import { errorMessage } from '../../api/client';
import {
  Alert,
  Badge,
  Button,
  Card,
  FormField,
  Input,
  Modal,
  Spinner,
  useToast,
} from '@cameleer/design-system';
import {
  useAccountMfaStatus,
  useAccountMfaSetup,
  useAccountMfaVerify,
  useAccountBackupCodes,
  useAccountMfaRemove,
} from '../../api/account-hooks';
import styles from '../../styles/platform.module.css';

export function MfaSection({ bare }: { bare?: boolean }) {
  const { toast } = useToast();
  const { data: mfaStatus, isLoading: statusLoading } = useAccountMfaStatus();
  const setup = useAccountMfaSetup();
  const verify = useAccountMfaVerify();
  const backupCodes = useAccountBackupCodes();
  const remove = useAccountMfaRemove();

  const [setupData, setSetupData] = useState<{ secret: string; secretQrCode: string } | null>(null);
  const [verifyCode, setVerifyCode] = useState('');
  const [codes, setCodes] = useState<string[] | null>(null);
  const [codesSaved, setCodesSaved] = useState(false);
  const [confirmRemove, setConfirmRemove] = useState(false);

  const modalOpen = !!setupData || !!codes;

  async function handleStartSetup() {
    try {
      const data = await setup.mutateAsync();
      setSetupData(data);
      setVerifyCode('');
    } catch (err) {
      toast({ title: 'Failed to start MFA setup', description: errorMessage(err), variant: 'error' });
    }
  }

  async function handleVerify(e: React.FormEvent) {
    e.preventDefault();
    if (!setupData) return;
    try {
      const result = await verify.mutateAsync({ secret: setupData.secret, code: verifyCode });
      if (result.verified) {
        const bc = await backupCodes.mutateAsync();
        setCodes(bc.codes);
        setSetupData(null);
        setVerifyCode('');
        setCodesSaved(false);
        toast({ title: 'MFA enabled successfully', variant: 'success' });
      } else {
        toast({ title: 'Invalid code. Please try again.', variant: 'error' });
      }
    } catch (err) {
      toast({ title: 'Verification failed', description: errorMessage(err), variant: 'error' });
    }
  }

  async function handleRegenerateCodes() {
    try {
      const bc = await backupCodes.mutateAsync();
      setCodes(bc.codes);
      setCodesSaved(false);
      toast({ title: 'Backup codes regenerated', variant: 'success' });
    } catch (err) {
      toast({ title: 'Failed to regenerate backup codes', description: errorMessage(err), variant: 'error' });
    }
  }

  async function handleRemove() {
    try {
      await remove.mutateAsync();
      setConfirmRemove(false);
      setCodes(null);
      setSetupData(null);
      toast({ title: 'MFA removed', variant: 'success' });
    } catch (err) {
      toast({ title: 'Failed to remove MFA', description: errorMessage(err), variant: 'error' });
    }
  }

  function handleModalClose() {
    // During backup codes step, only allow close after confirming saved
    if (codes) return;
    // During setup, safe to cancel — TOTP is not registered until verified
    setSetupData(null);
    setVerifyCode('');
  }

  function handleBackupCodesDone() {
    setCodes(null);
    setCodesSaved(false);
  }

  function handleCopyAll() {
    if (!codes) return;
    navigator.clipboard.writeText(codes.join('\n'));
    toast({ title: 'Backup codes copied to clipboard', variant: 'success' });
  }

  function handleDownload() {
    if (!codes) return;
    const blob = new Blob([codes.join('\n')], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'cameleer-mfa-backup-codes.txt';
    a.click();
    URL.revokeObjectURL(url);
  }

  if (statusLoading) {
    const spinner = <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}><Spinner /></div>;
    return bare ? spinner : <Card title="Multi-Factor Authentication">{spinner}</Card>;
  }

  const content = (
    <>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
          <span className={styles.description} style={{ margin: 0 }}>Status:</span>
          {mfaStatus?.enrolled ? (
            <Badge label="Enrolled" color="success" />
          ) : (
            <Badge label="Not enrolled" color="auto" />
          )}
        </div>
        {mfaStatus?.enrolled ? (
          <>
            <p className={styles.description} style={{ marginTop: 0 }}>
              Your account is protected with a TOTP authenticator app.
            </p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <Button variant="secondary" onClick={handleRegenerateCodes} loading={backupCodes.isPending}>
                Regenerate backup codes
              </Button>
              {confirmRemove ? (
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Alert variant="error" title="This will disable MFA on your account." />
                  <Button variant="danger" onClick={handleRemove} loading={remove.isPending}>
                    Confirm removal
                  </Button>
                  <Button variant="secondary" onClick={() => setConfirmRemove(false)}>
                    Cancel
                  </Button>
                </div>
              ) : (
                <Button variant="danger" onClick={() => setConfirmRemove(true)}>
                  Remove MFA
                </Button>
              )}
            </div>
          </>
        ) : (
          <>
            <p className={styles.description} style={{ marginTop: 0 }}>
              Add an extra layer of security to your account by enabling multi-factor authentication with an authenticator app.
            </p>
            <div>
              <Button variant="primary" onClick={handleStartSetup} loading={setup.isPending}>
                Set up authenticator app
              </Button>
            </div>
          </>
        )}
    </>
  );

  return (
    <>
      {bare ? content : <Card title="Multi-Factor Authentication">{content}</Card>}

      <Modal
        open={modalOpen}
        onClose={handleModalClose}
        title={codes ? 'Save your backup codes' : 'Set up authenticator'}
        size="md"
      >
        {codes ? (
          <>
            <Alert variant="warning" title="Save your backup codes">
              These codes can be used to sign in if you lose access to your authenticator app. Each code can only be used once. Store them in a safe place.
            </Alert>
            <div style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: '8px 24px',
              marginTop: 16,
              padding: '16px',
              background: 'var(--bg-inset)',
              border: '1px solid var(--border)',
              borderRadius: 6,
              fontFamily: 'var(--font-mono, monospace)',
              fontSize: '0.875rem',
            }}>
              {codes.map((code) => (
                <span key={code}>{code}</span>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
              <Button variant="secondary" onClick={handleCopyAll}>Copy all</Button>
              <Button variant="secondary" onClick={handleDownload}>Download .txt</Button>
            </div>
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 16, fontSize: '0.875rem', cursor: 'pointer' }}>
              <input type="checkbox" checked={codesSaved} onChange={(e) => setCodesSaved(e.target.checked)} />
              I've saved my backup codes
            </label>
            <div style={{ marginTop: 12 }}>
              <Button variant="primary" disabled={!codesSaved} onClick={handleBackupCodesDone}>
                Done
              </Button>
            </div>
          </>
        ) : setupData ? (
          <>
            <p className={styles.description} style={{ marginTop: 0 }}>
              Scan this QR code with your authenticator app (Google Authenticator, Authy, 1Password, etc.), then enter the 6-digit code below.
            </p>
            <div style={{ display: 'flex', justifyContent: 'center', padding: '16px 0' }}>
              <QRCodeSVG value={setupData.secretQrCode} size={200} />
            </div>
            <div style={{
              textAlign: 'center',
              padding: '8px 12px',
              background: 'var(--bg-inset)',
              border: '1px solid var(--border)',
              borderRadius: 6,
              fontFamily: 'var(--font-mono, monospace)',
              fontSize: '0.75rem',
              wordBreak: 'break-all',
              marginBottom: 16,
            }}>
              {setupData.secret}
            </div>
            <form onSubmit={handleVerify} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <FormField label="Verification code" htmlFor="mfa-code">
                <Input
                  id="mfa-code"
                  type="text"
                  inputMode="numeric"
                  maxLength={6}
                  pattern="[0-9]{6}"
                  value={verifyCode}
                  onChange={(e) => setVerifyCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
                  placeholder="Enter 6-digit code"
                  required
                  autoComplete="one-time-code"
                />
              </FormField>
              <div style={{ display: 'flex', gap: 8 }}>
                <Button type="submit" variant="primary" loading={verify.isPending || backupCodes.isPending} disabled={verifyCode.length !== 6}>
                  Verify & Enable
                </Button>
                <Button type="button" variant="secondary" onClick={handleModalClose}>
                  Cancel
                </Button>
              </div>
            </form>
          </>
        ) : null}
      </Modal>
    </>
  );
}