import { useEffect, useState } from 'react';
import { Button, Input, Toggle, FormField, Card, Alert, SectionHeader } from '@cameleer/design-system';
import { adminFetch } from '../../api/queries/admin/admin-api';

interface OidcConfig {
  enabled: boolean;
  issuerUri: string;
  clientId: string;
  clientSecret: string;
  rolesClaim: string;
  defaultRoles: string[];
  autoSignup: boolean;
  displayNameClaim: string;
}

export default function OidcConfigPage() {
  const [config, setConfig] = useState<OidcConfig | null>(null);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    adminFetch<OidcConfig>('/oidc')
      .then(setConfig)
      .catch(() => setConfig({ enabled: false, issuerUri: '', clientId: '', clientSecret: '', rolesClaim: 'roles', defaultRoles: ['VIEWER'], autoSignup: true, displayNameClaim: 'name' }));
  }, []);

  const handleSave = async () => {
    if (!config) return;
    setSaving(true);
    setError(null);
    try {
      await adminFetch('/oidc', { method: 'PUT', body: JSON.stringify(config) });
      setSuccess(true);
      setTimeout(() => setSuccess(false), 3000);
    } catch (e: any) {
      setError(e.message);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    try {
      await adminFetch('/oidc', { method: 'DELETE' });
      setConfig({ enabled: false, issuerUri: '', clientId: '', clientSecret: '', rolesClaim: 'roles', defaultRoles: ['VIEWER'], autoSignup: true, displayNameClaim: 'name' });
    } catch (e: any) {
      setError(e.message);
    }
  };

  if (!config) return null;

  return (
    <div>
      <h2 style={{ marginBottom: '1rem' }}>OIDC Configuration</h2>
      <Card>
        <div style={{ padding: '1.5rem', display: 'grid', gap: '1rem' }}>
          <Toggle checked={config.enabled} onChange={(e) => setConfig({ ...config, enabled: e.target.checked })} label="Enable OIDC" />
          <FormField label="Issuer URI"><Input value={config.issuerUri} onChange={(e) => setConfig({ ...config, issuerUri: e.target.value })} /></FormField>
          <FormField label="Client ID"><Input value={config.clientId} onChange={(e) => setConfig({ ...config, clientId: e.target.value })} /></FormField>
          <FormField label="Client Secret"><Input type="password" value={config.clientSecret} onChange={(e) => setConfig({ ...config, clientSecret: e.target.value })} /></FormField>
          <FormField label="Roles Claim"><Input value={config.rolesClaim} onChange={(e) => setConfig({ ...config, rolesClaim: e.target.value })} /></FormField>
          <FormField label="Display Name Claim"><Input value={config.displayNameClaim} onChange={(e) => setConfig({ ...config, displayNameClaim: e.target.value })} /></FormField>
          <Toggle checked={config.autoSignup} onChange={(e) => setConfig({ ...config, autoSignup: e.target.checked })} label="Auto Signup" />

          <div style={{ display: 'flex', gap: '0.75rem' }}>
            <Button variant="primary" onClick={handleSave} disabled={saving}>{saving ? 'Saving...' : 'Save'}</Button>
            <Button variant="danger" onClick={handleDelete}>Remove Config</Button>
          </div>

          {error && <Alert variant="error">{error}</Alert>}
          {success && <Alert variant="success">Configuration saved</Alert>}
        </div>
      </Card>
    </div>
  );
}