import { useState } from 'react';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, TextField } from '@mui/material';
import { useCreateTaxCode } from '../../../hooks/useTaxCodes';

export function TaxCodeDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
  const createTaxCode = useCreateTaxCode();
  const [code, setCode] = useState('');
  const [name, setName] = useState('');
  const [ratePercent, setRatePercent] = useState('');
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async () => {
    setError(null);
    try {
      await createTaxCode.mutateAsync({ code, name, ratePercent: Number(ratePercent) });
      onClose();
      setCode('');
      setName('');
      setRatePercent('');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to create tax code');
    }
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
      <DialogTitle>New Tax Code</DialogTitle>
      <DialogContent>
        <Stack spacing={2} sx={{ mt: 1 }}>
          <TextField label="Code" value={code} onChange={(e) => setCode(e.target.value.toUpperCase())} helperText="e.g. STD, ZERO" />
          <TextField label="Name" value={name} onChange={(e) => setName(e.target.value)} />
          <TextField
            label="Rate %"
            type="number"
            value={ratePercent}
            onChange={(e) => setRatePercent(e.target.value)}
            slotProps={{ htmlInput: { min: 0, max: 100, step: '0.001' } }}
          />
          {error && <span style={{ color: 'red' }}>{error}</span>}
        </Stack>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
        <Button variant="contained" onClick={handleSubmit} disabled={createTaxCode.isPending}>
          Create
        </Button>
      </DialogActions>
    </Dialog>
  );
}