/**
 * Add/Edit dialog for an LlmProvider row.
 * Save is disabled until provider_code + provider_name are non-empty.
 */
import React from 'react';
import {
  Box, Dialog, DialogTitle, DialogContent, DialogActions, TextField, FormControl,
  InputLabel, Select, MenuItem, FormControlLabel, Checkbox, Button,
} from '@mui/material';
import type { LlmProvider } from '../ProvidersManagement.types';

interface Props {
  open: boolean;
  data: Partial<LlmProvider> | null;
  onClose: () => void;
  onChange: (data: Partial<LlmProvider>) => void;
  onSave: () => void;
}

export const ProviderDialog: React.FC<Props> = ({ open, data, onClose, onChange, onSave }) => {
  if (!data) return null;
  const isEdit = 'provider_id' in data && !!data.provider_id;

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle>{isEdit ? 'Edit Provider' : 'Add Provider'}</DialogTitle>
      <DialogContent>
        <Box display="flex" flexDirection="column" gap={2} pt={1}>
          <TextField label="Provider Code" value={data.provider_code || ''} onChange={(e) => onChange({ ...data, provider_code: e.target.value })} required fullWidth />
          <TextField label="Provider Name" value={data.provider_name || ''} onChange={(e) => onChange({ ...data, provider_name: e.target.value })} required fullWidth />
          <TextField label="Base URL" value={data.base_url || ''} onChange={(e) => onChange({ ...data, base_url: e.target.value })} fullWidth placeholder="https://api.example.com/v1" />
          <FormControl fullWidth>
            <InputLabel>Auth Type</InputLabel>
            <Select value={data.auth_type || 'bearer'} label="Auth Type" onChange={(e) => onChange({ ...data, auth_type: e.target.value })}>
              <MenuItem value="bearer">Bearer Token</MenuItem>
              <MenuItem value="api_key">API Key Header</MenuItem>
              <MenuItem value="x-api-key">X-API-Key Header</MenuItem>
              <MenuItem value="none">No Auth</MenuItem>
            </Select>
          </FormControl>
          <Box display="flex" gap={2}>
            <TextField label="Priority" type="number" value={data.priority || 100} onChange={(e) => onChange({ ...data, priority: parseInt(e.target.value) })} sx={{ flex: 1 }} />
            <TextField label="Rate Limit (RPM)" type="number" value={data.rate_limit_rpm || 60} onChange={(e) => onChange({ ...data, rate_limit_rpm: parseInt(e.target.value) })} sx={{ flex: 1 }} />
            <TextField label="Rate Limit (TPM)" type="number" value={data.rate_limit_tpm || 100000} onChange={(e) => onChange({ ...data, rate_limit_tpm: parseInt(e.target.value) })} sx={{ flex: 1 }} />
          </Box>
          <TextField label="Description" value={data.description || ''} onChange={(e) => onChange({ ...data, description: e.target.value })} multiline rows={2} fullWidth />
          <FormControlLabel control={<Checkbox checked={data.is_active !== false} onChange={(e) => onChange({ ...data, is_active: e.target.checked })} />} label="Active" />
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
        <Button variant="contained" onClick={onSave} disabled={!data.provider_code || !data.provider_name}>
          {isEdit ? 'Update' : 'Create'}
        </Button>
      </DialogActions>
    </Dialog>
  );
};