"use client";

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import type { AccumulatorMasterDetails } from "./schema";

type Props = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  isin?: string;
  details: AccumulatorMasterDetails | null;
};

export function AccumulatorDetailsDialog({
  open,
  onOpenChange,
  isin,
  details,
}: Props) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[85vh] max-w-3xl overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Details{isin ? ` — ${isin}` : ""}</DialogTitle>
        </DialogHeader>

        {details ? (
          <div className="space-y-6">
            <Table>
              <TableBody>
                {details.fields.map((field) => (
                  <TableRow key={field.label}>
                    <TableHead className="w-44 bg-muted/40">{field.label}</TableHead>
                    <TableCell>{field.value}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>

            <div>
              <h4 className="mb-2 font-semibold text-sm">Child (accumulator_child)</h4>
              <div className="overflow-x-auto rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="text-xs">Sl no (id)</TableHead>
                      <TableHead className="text-xs">ISIN</TableHead>
                      <TableHead className="text-xs">Date</TableHead>
                      <TableHead className="text-xs">Quantity per period</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {details.children.length > 0 ? (
                      details.children.map((child, index) => (
                        <TableRow key={child.srNo}>
                          <TableCell className="text-xs">
                            {index + 1} ({child.srNo})
                          </TableCell>
                          <TableCell className="font-mono text-xs">{child.isin}</TableCell>
                          <TableCell className="text-xs">{child.date}</TableCell>
                          <TableCell className="text-xs tabular-nums">
                            {child.quantityPerPeriod}
                          </TableCell>
                        </TableRow>
                      ))
                    ) : (
                      <TableRow>
                        <TableCell colSpan={4} className="text-muted-foreground text-xs">
                          No records
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </div>
          </div>
        ) : null}
      </DialogContent>
    </Dialog>
  );
}