import { Dialog, DialogContent, DialogOverlay } from "../ui/dialog";
import type { SizeChart } from "../../../src/api/types";

interface SizeGuideDialogProps {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
  sizeChart: SizeChart;
}

const UNIT_LABELS: Record<string, string> = {
  cm: "سانتی‌متر",
  inch: "اینچ",
};

export function SizeGuideDialog({
  isOpen,
  onOpenChange,
  sizeChart,
}: SizeGuideDialogProps) {
  const { columns = [], rows = [], unit = "cm" } = sizeChart;
  const unitLabel = UNIT_LABELS[unit] || unit;

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogOverlay />
      <DialogContent className="p-4 bg-WHITE rounded-[15px] w-[calc(100%-40px)] max-w-lg max-h-[85vh] overflow-y-auto">
        <div className="flex flex-col gap-3">
          <div className="flex items-center justify-between">
            <h2 className="text-B18 font-bold">راهنمای سایز</h2>
            <span className="text-R12 text-GRAY">اندازه‌ها به {unitLabel}</span>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full border-collapse text-center">
              <thead>
                <tr>
                  <th className="sticky right-0 z-10 bg-WHITE2 border border-GRAY3 px-3 py-2 text-R12 font-bold text-BLACK2">
                    سایز
                  </th>
                  {columns.map((col, ci) => (
                    <th
                      key={ci}
                      className="border border-GRAY3 bg-WHITE2 px-3 py-2 text-R12 font-bold text-BLACK2 whitespace-nowrap"
                    >
                      {col}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {rows.map((row, ri) => (
                  <tr key={ri}>
                    <td className="sticky right-0 z-10 bg-WHITE border border-GRAY3 px-3 py-2 text-R12 font-bold">
                      {row.label}
                    </td>
                    {columns.map((_, ci) => (
                      <td
                        key={ci}
                        className="border border-GRAY3 px-3 py-2 text-R12 text-BLACK2"
                        dir="ltr"
                      >
                        {row.values[ci]?.trim() ? row.values[ci] : "—"}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <p className="text-R12 text-GRAY leading-6">
            اندازه‌ها ممکن است بسته به روش اندازه‌گیری کمی متفاوت باشند.
          </p>
        </div>
      </DialogContent>
    </Dialog>
  );
}

export default SizeGuideDialog;