import React, { useState, Fragment } from "react";
import moment from "moment";
import "moment/locale/id";
import Swal from "sweetalert2";
import { Table } from "reactstrap";

moment.locale("id");

function TableRiwayat({ data = [], data_pelanggaran = {}, role }) {
  const [openIndex, setOpenIndex] = useState(null);

  const toggleRow = (index) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  const handleOpenAlert = () => {
    Swal.fire({
      icon: "error",
      title: "Oops...",
      html: "Maaf anda tidak memiliki akses untuk menyelesaikan <p>proses ini.</p>",
      confirmButtonColor: "#3e3a8e",
      confirmButtonText: "Oke",
    });
  };

  return (
    <div className="card ">
      <h3 className="mb-3 fw-bold">Riwayat Surat Sanksi</h3>

      <Table  hover responsive>
        <thead className="table-header">
          <tr>
            <th>Tanggal</th>
            <th>Keterangan</th>
            <th>Nomor Surat Sanksi</th>
            <th>Dokumen Surat Sanksi</th>
            <th width="50"></th>
          </tr>
        </thead>

        <tbody>
          {data.length === 0 && (
            <tr>
              <td colSpan="5" className="text-center">
                Data tidak tersedia
              </td>
            </tr>
          )}

          {data.map((item, index) => (
            <Fragment key={index}>
              {/* ROW UTAMA */}
              <tr className="main-row">
                <td>
                  {item.createdAt
                    ? moment(item.createdAt).format("DD/MM/YYYY")
                    : "-"}
                </td>

                <td>{item.keterangan || "-"}</td>

                <td>{item.no_sanksi || "-"}</td>

                <td>
                  {item.dokumen?.length > 0 ? (
                    item.dokumen.map((doc, i) => (
                      <div key={i}>
                        <i className="far fa-file-pdf me-2"></i>

                        {role === 2071 ? (
                          <span
                            className="text-muted"
                            style={{ cursor: "pointer" }}
                            onClick={handleOpenAlert}
                          >
                            {doc.judul}
                          </span>
                        ) : (
                          <a
                            href={doc.path}
                            target="_blank"
                            rel="noopener noreferrer"
                            download={doc.judul}
                            className="text-muted"
                          >
                            {doc.judul}
                          </a>
                        )}
                      </div>
                    ))
                  ) : (
                    "-"
                  )}
                </td>

                <td className="">
                  <span
                    onClick={() => toggleRow(index)}
                  >
                    {openIndex === index ? <em className="fas fa-angle-up"/> : <em className="fas fa-angle-down"/>}
                  </span>
                </td>
              </tr>

              {/* DETAIL EXPAND */}
              {openIndex === index && (
                <tr className="detail-row">
                  <td colSpan="5">
                    <div className="p-3 bg-light rounded">
                      <Table  responsive>
                        <thead>
                          <tr>
                            <th width="50%">Jenis Pelanggaran</th>
                            <th width="50%">Sanksi</th>
                          </tr>
                        </thead>

                        <tbody>
                          {data_pelanggaran?.pelanggaran?.length > 0 ? (
                            data_pelanggaran.pelanggaran.map((jp) => (
                              <tr key={jp._id}>
                                <td>
                                  <p className="mb-1">
                                    {jp.pelanggaran}
                                  </p>
                                  <small>
                                    Durasi: {jp.tmt_bulan} Bulan
                                  </small>
                                  <br />
                                  <small>
                                    Jenis Sanksi Administratif:{" "}
                                    {jp.label_sanksi}
                                  </small>
                                </td>

                                <td>
                                  <p className="mb-1">{jp.sanksi}</p>
                                  <small>
                                    Keterangan:{" "}
                                    {jp.keterangan_sanksi || "-"}
                                  </small>
                                </td>
                              </tr>
                            ))
                          ) : (
                            <tr>
                              <td colSpan="2" className="text-center">
                                Tidak ada data pelanggaran
                              </td>
                            </tr>
                          )}
                        </tbody>
                      </Table>
                    </div>
                  </td>
                </tr>
              )}
            </Fragment>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

export default TableRiwayat;