"use client";

import React from "react";
import styles from "../../commonstyle/FormStyles.module.css";
import type { CreatedTrainingCertificate } from "@/lib/api/types/training-certificate.types";

interface Props {
  items: CreatedTrainingCertificate[];
  batchRef?: string | null;
  onClose: () => void;
}

export default function TrainingSuccessModal({
  items,
  batchRef,
  onClose,
}: Props) {
  const downloadQR = (qrCode: string, certNo: string) => {
    const link = document.createElement("a");
    link.href = qrCode;
    link.download = `${certNo}-qr.png`;
    link.click();
  };

  const downloadAllQRs = () => {
    items.forEach((c, i) => {
      setTimeout(
        () => downloadQR(c.qrCode, c.certificate.certificate_no),
        i * 150,
      );
    });
  };

  return (
    <div className={styles.modalOverlay}>
      <div
        className={styles.modalContent}
        style={{ maxWidth: 900, width: "95%" }}
      >
        <div className={styles.modalHeader}>
          <h2 className={styles.modalTitle}>
            ✅ Training Certificate{items.length > 1 ? "s" : ""} Created
          </h2>
          <button className={styles.closeBtn} onClick={onClose} type="button">
            ×
          </button>
        </div>

        <div className={styles.formBody}>
          {/* Summary */}
          <div
            style={{
              display: "grid",
              gridTemplateColumns: batchRef ? "repeat(2,1fr)" : "1fr",
              gap: 12,
              marginBottom: 20,
            }}
          >
            <div
              style={{
                padding: "12px 16px",
                borderRadius: 10,
                border: "1px solid #e2e8f0",
                background: "#f8fafc",
              }}
            >
              <div
                style={{
                  fontSize: 11,
                  fontWeight: 700,
                  color: "#2563eb",
                  textTransform: "uppercase",
                  letterSpacing: 0.5,
                }}
              >
                Total Issued
              </div>
              <div style={{ fontSize: 24, fontWeight: 800, color: "#0f172a" }}>
                {items.length}
              </div>
            </div>
            {batchRef && (
              <div
                style={{
                  padding: "12px 16px",
                  borderRadius: 10,
                  border: "1px solid #e2e8f0",
                  background: "#f8fafc",
                }}
              >
                <div
                  style={{
                    fontSize: 11,
                    fontWeight: 700,
                    color: "#15803d",
                    textTransform: "uppercase",
                    letterSpacing: 0.5,
                  }}
                >
                  Batch Reference
                </div>
                <div
                  style={{
                    fontSize: 18,
                    fontWeight: 800,
                    color: "#0f172a",
                    fontFamily: "'IBM Plex Mono', monospace",
                  }}
                >
                  {batchRef}
                </div>
              </div>
            )}
          </div>

          {/* Certificates list */}
          <div
            style={{
              fontSize: 11,
              fontWeight: 800,
              color: "#94a3b8",
              letterSpacing: ".08em",
              textTransform: "uppercase",
              marginBottom: 10,
            }}
          >
            Certificates ({items.length})
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {items.map((c, idx) => (
              <div
                key={idx}
                style={{
                  border: "1px solid #e2e8f0",
                  borderRadius: 8,
                  padding: 14,
                  display: "flex",
                  alignItems: "center",
                  gap: 14,
                }}
              >
                <img
                  src={c.qrCode}
                  alt={`QR ${c.certificate.certificate_no}`}
                  style={{
                    width: 84,
                    height: 84,
                    border: "1px solid #e2e8f0",
                    borderRadius: 6,
                    flexShrink: 0,
                    imageRendering: "pixelated",
                  }}
                />
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div
                    style={{
                      fontFamily: "'IBM Plex Mono', monospace",
                      fontWeight: 800,
                      fontSize: 14,
                      color: "#0f172a",
                    }}
                  >
                    {c.certificate.certificate_no}
                  </div>
                  <div
                    style={{
                      fontSize: 13,
                      fontWeight: 600,
                      color: "#334155",
                      marginTop: 2,
                    }}
                  >
                    {c.certificate.participant_name}
                  </div>
                  <div style={{ fontSize: 11.5, color: "#94a3b8" }}>
                    {c.certificate.participant_company || "—"}
                  </div>
                  <div
                    style={{
                      fontSize: 10.5,
                      color: "#cbd5e1",
                      marginTop: 4,
                      wordBreak: "break-all",
                    }}
                  >
                    {c.verification_url}
                  </div>
                </div>
                <button
                  type="button"
                  onClick={() =>
                    downloadQR(c.qrCode, c.certificate.certificate_no)
                  }
                  style={{
                    padding: "6px 12px",
                    borderRadius: 6,
                    border: "1px solid #e2e8f0",
                    background: "#fff",
                    fontSize: 12,
                    fontWeight: 700,
                    color: "#0f766e",
                    cursor: "pointer",
                    flexShrink: 0,
                  }}
                >
                  ⬇️ QR
                </button>
              </div>
            ))}
          </div>

          {/* Next step hint */}
          <div
            style={{
              marginTop: 16,
              padding: "10px 14px",
              background: "#fef9c3",
              border: "1px solid #fde047",
              borderRadius: 8,
              fontSize: 11.5,
              color: "#854d0e",
              lineHeight: 1.5,
            }}
          >
            💡 <strong>Next step:</strong> place the QR on the printed
            certificate, sign it, then upload the scanned copy from the
            certificate&apos;s <strong>View</strong> modal — the status flips
            from <em>pending_scan</em> to <em>active</em> automatically.
          </div>
        </div>

        <div className={styles.modalFooter}>
          <button type="button" className={styles.btnCancel} onClick={onClose}>
            Close
          </button>
          {items.length > 1 && (
            <button
              type="button"
              className={styles.btnSubmit}
              onClick={downloadAllQRs}
              style={{
                background: "linear-gradient(135deg, #0f766e 0%, #14b8a6 100%)",
              }}
            >
              ⬇️ Download All QR Codes
            </button>
          )}
        </div>
      </div>
    </div>
  );
}