import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Chip from "@mui/material/Chip";
import { Card, Button, TextField } from "../../ui";
import type { ReviewInvoice, EditableField } from "./types";

interface InvoiceReviewCardProps {
  inv: ReviewInvoice;
  busy: boolean;
  canSave: boolean;
  onChange: (uid: string, field: EditableField, value: string) => void;
  onSave: (inv: ReviewInvoice) => void;
  onDiscard: (uid: string) => void;
}

const fieldCols = { xs: "1fr", sm: "1fr 1fr" };

export default function InvoiceReviewCard({
  inv,
  busy,
  canSave,
  onChange,
  onSave,
  onDiscard,
}: InvoiceReviewCardProps) {
  return (
    <Card variant="outlined" sx={{ p: 1.5 }}>
      {/* Header: chip + filename */}
      <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}>
        <Chip label="Faktura" size="small" color="primary" />
        <Typography
          variant="caption"
          color="text.secondary"
          noWrap
          title={inv.file_name}
        >
          {inv.file_name}
        </Typography>
      </Box>

      {/* 2-column field grid */}
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: fieldCols,
          gap: 1,
        }}
      >
        <TextField
          label="Dodavatel"
          value={inv.supplier_name}
          disabled={busy}
          onChange={(e) => onChange(inv.uid, "supplier_name", e.target.value)}
        />
        <TextField
          label="Číslo faktury"
          value={inv.invoice_number}
          disabled={busy}
          onChange={(e) => onChange(inv.uid, "invoice_number", e.target.value)}
        />
        <TextField
          label="Částka s DPH"
          value={inv.amount}
          disabled={busy}
          onChange={(e) => onChange(inv.uid, "amount", e.target.value)}
        />
        <TextField
          label="Měna"
          value={inv.currency}
          disabled={busy}
          onChange={(e) => onChange(inv.uid, "currency", e.target.value)}
        />
        <TextField
          label="Sazba DPH %"
          value={inv.vat_rate}
          disabled={busy}
          onChange={(e) => onChange(inv.uid, "vat_rate", e.target.value)}
        />
        <TextField
          label="Datum vystavení"
          value={inv.issue_date}
          disabled={busy}
          onChange={(e) => onChange(inv.uid, "issue_date", e.target.value)}
        />
        <TextField
          label="Datum splatnosti"
          value={inv.due_date}
          disabled={busy}
          onChange={(e) => onChange(inv.uid, "due_date", e.target.value)}
        />
        <TextField
          label="Popis"
          value={inv.description}
          disabled={busy}
          onChange={(e) => onChange(inv.uid, "description", e.target.value)}
        />
      </Box>

      {/* Actions */}
      <Box sx={{ display: "flex", gap: 1, mt: 1.5 }}>
        <Button
          onClick={() => onSave(inv)}
          disabled={busy || !canSave}
          title={
            !canSave ? "Nemáte oprávnění k uložení přijatých faktur" : undefined
          }
        >
          Uložit
        </Button>
        <Button
          variant="outlined"
          color="inherit"
          onClick={() => onDiscard(inv.uid)}
          disabled={busy}
        >
          Zahodit
        </Button>
      </Box>
    </Card>
  );
}
