/**
 * Assignments tab — maps each component to a primary provider+model with
 * an optional fallback. Settings column packs temp/max/timeout into one
 * caption row to keep the table scannable.
 */
import React from 'react';
import {
  Box, TableContainer, Table, TableHead, TableBody, TableRow, TableCell,
  Button, Chip, IconButton, Switch, Typography,
} from '@mui/material';
import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
import type { ComponentAssignment } from '../ProvidersManagement.types';

interface Props {
  assignments: ComponentAssignment[];
  hasProvidersAndModels: boolean;
  onAdd: () => void;
  onEdit: (a: ComponentAssignment) => void;
  onDelete: (a: ComponentAssignment) => void;
  onToggleEnabled: (a: ComponentAssignment) => void;
}

export const AssignmentsTab: React.FC<Props> = ({ assignments, hasProvidersAndModels, onAdd, onEdit, onDelete, onToggleEnabled }) => (
  <>
    <Box display="flex" justifyContent="flex-end" mb={2}>
      <Button variant="contained" startIcon={<AddIcon />} onClick={onAdd} disabled={!hasProvidersAndModels}>
        Add Assignment
      </Button>
    </Box>
    <TableContainer>
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell>Component</TableCell>
            <TableCell>Provider / Model</TableCell>
            <TableCell>Fallback</TableCell>
            <TableCell>Settings</TableCell>
            <TableCell>Enabled</TableCell>
            <TableCell>Actions</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {assignments.map((a) => (
            <TableRow key={a.assignment_id} hover>
              <TableCell>
                <strong>{a.component_name}</strong>
                <Typography variant="caption" display="block" color="text.secondary">{a.component_code}</Typography>
              </TableCell>
              <TableCell>
                <Chip label={a.provider_code} size="small" sx={{ mr: 0.5 }} />
                <Chip label={a.model_code} size="small" variant="outlined" />
              </TableCell>
              <TableCell>
                {a.fallback_provider_code ? (
                  <>
                    <Chip label={a.fallback_provider_code} size="small" sx={{ mr: 0.5 }} />
                    <Chip label={a.fallback_model_code} size="small" variant="outlined" />
                  </>
                ) : '-'}
              </TableCell>
              <TableCell>
                <Typography variant="caption">
                  temp: {a.temperature} | max: {a.max_tokens} | timeout: {a.timeout_ms}ms
                </Typography>
              </TableCell>
              <TableCell>
                <Switch checked={a.is_enabled} onChange={() => onToggleEnabled(a)} size="small" />
              </TableCell>
              <TableCell>
                <IconButton size="small" onClick={() => onEdit(a)}><EditIcon /></IconButton>
                <IconButton size="small" onClick={() => onDelete(a)} color="error"><DeleteIcon /></IconButton>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  </>
);