"use client";

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

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

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

export function StructureDetailsDialog({
  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-40 bg-muted/40">{field.label}</TableHead>
                    <TableCell>{field.value}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>

            <div>
              <h4 className="mb-2 font-semibold text-sm">Coupon dates (structure_coupon_child)</h4>
              <DetailsDateTable
                headers={["Sl No (id)", "Parent ISIN", "Date"]}
                rows={
                  details.couponDates.length > 0
                    ? details.couponDates.map((row, index) => [
                        `${index + 1} (${row.srNo})`,
                        row.parentIsin,
                        row.date,
                      ])
                    : [["No records", "", ""]]
                }
              />
            </div>

            <div>
              <h4 className="mb-2 font-semibold text-sm">
                Observation dates (structure_observation_child)
              </h4>
              <DetailsDateTable
                headers={["Sl No (id)", "Parent ISIN", "Date", "Non call"]}
                rows={
                  details.observationDates.length > 0
                    ? details.observationDates.map((row, index) => [
                        `${index + 1} (${row.srNo})`,
                        row.parentIsin,
                        row.date,
                        row.nonCall,
                      ])
                    : [["No records", "", "", ""]]
                }
              />
            </div>
          </div>
        ) : null}
      </DialogContent>
    </Dialog>
  );
}

function DetailsDateTable({
  headers,
  rows,
}: {
  headers: string[];
  rows: string[][];
}) {
  return (
    <div className="overflow-x-auto rounded-md border">
      <Table>
        <TableHeader>
          <TableRow>
            {headers.map((header) => (
              <TableHead key={header} className="text-xs">
                {header}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row, index) => (
            <TableRow key={index}>
              {row.map((cell, cellIndex) => (
                <TableCell key={cellIndex} className="text-xs">
                  {cell}
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}