// assets/js/pages/admin/modals/ArchiveDetailModal.js

const ArchiveDetailModal = ({ isOpen, onClose, archive }) => (
  <Modal isOpen={isOpen} onClose={onClose} title="Detail Arsip" size="large">
    {archive && (
      <div>
        {/* Image */}
        <img
          src={
            archive.photo_url ||
            "https://via.placeholder.com/600x400?text=No+Image"
          }
          alt={archive.name}
          className="w-full h-64 object-cover rounded-xl mb-4 border-2 border-slate-600"
          onError={(e) =>
            (e.target.src = "https://via.placeholder.com/600x400?text=No+Image")
          }
        />

        {/* Header Info */}
        <div className="bg-green-500/10 border-2 border-green-500/30 p-4 rounded-xl mb-6">
          <h3 className="text-xl font-bold text-white mb-2">{archive.name}</h3>
          <div className="grid grid-cols-2 gap-3 text-sm text-slate-300">
            <div>
              <strong className="text-green-400">Status:</strong>{" "}
              <span className="px-3 py-1 rounded-full text-xs font-semibold bg-green-500/20 text-green-400 border border-green-500/50">
                ✅ CASE CLOSED
              </span>
            </div>
            <div>
              <strong className="text-green-400">Kategori:</strong>{" "}
              {archive.category || "-"}
            </div>
            <div>
              <strong className="text-green-400">Lokasi Ditemukan:</strong>{" "}
              {archive.location}
            </div>
            <div>
              <strong className="text-green-400">Tanggal Ditemukan:</strong>{" "}
              {Helpers.formatDate(archive.date_found)}
            </div>
          </div>
        </div>

        {/* Description Sections */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
          <div className="bg-slate-900/50 p-4 rounded-xl border border-slate-600">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">📝</span>
              <strong className="text-blue-400">Deskripsi Umum</strong>
            </div>
            <p className="text-sm text-slate-300 leading-relaxed">
              {archive.description || "Tidak ada deskripsi"}
            </p>
          </div>

          <div className="bg-yellow-500/10 p-4 rounded-xl border border-yellow-500/30">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">🔒</span>
              <strong className="text-yellow-400">Ciri Khusus Rahasia</strong>
            </div>
            <p className="text-sm text-slate-300 leading-relaxed">
              {archive.secret_details || "Tidak ada deskripsi rahasia"}
            </p>
          </div>
        </div>

        {/* Reporter Info */}
        <div className="bg-slate-900/50 p-4 rounded-xl border border-slate-600 mb-6">
          <strong className="text-slate-300 block mb-2">
            Informasi Pelapor:
          </strong>
          <div className="grid grid-cols-2 gap-3 text-sm text-slate-300">
            <div>
              <strong className="text-blue-400">Nama:</strong>{" "}
              {archive.reporter_name || "Tidak ada data"}
            </div>
            <div>
              <strong className="text-blue-400">Kontak:</strong>{" "}
              {archive.reporter_contact || "Tidak ada data"}
            </div>
          </div>
        </div>

        {/* Case Closed Info */}
        <div className="bg-green-500/10 border-2 border-green-500/30 p-4 rounded-xl mb-6">
          <div className="flex items-center gap-2 mb-3">
            <span className="text-3xl">📋</span>
            <strong className="text-green-400 text-lg">
              Informasi Penutupan Case
            </strong>
          </div>
          <div className="space-y-2 text-sm text-slate-300">
            <div>
              No. Berita Acara:{" "}
              <strong className="text-white text-lg">
                {archive.berita_acara_no || "-"}
              </strong>
            </div>
            {archive.case_closed_at && (
              <div>
                Tanggal Ditutup:{" "}
                <strong>
                  {Helpers.formatDateTime(archive.case_closed_at)}
                </strong>
              </div>
            )}
            {archive.case_closed_by_name && (
              <div>
                Ditutup Oleh: <strong>{archive.case_closed_by_name}</strong>
              </div>
            )}
            {archive.claimer_name && (
              <div>
                Diterima Oleh (Penerima):{" "}
                <strong className="text-green-400">
                  {archive.claimer_name}
                </strong>
              </div>
            )}
            {archive.claimer_contact && (
              <div>
                Kontak Penerima: <strong>{archive.claimer_contact}</strong>
              </div>
            )}
            {archive.case_closed_notes && (
              <div className="mt-3 pt-3 border-t border-green-500/30">
                <strong className="block mb-1">Catatan Penutupan:</strong>
                <p className="text-slate-300 bg-slate-900/50 p-3 rounded-lg">
                  {archive.case_closed_notes}
                </p>
              </div>
            )}
          </div>
          {archive.bukti_serah_terima && (
            <a
              href={archive.bukti_serah_terima}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-block mt-3 px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition shadow-lg"
            >
              📄 Lihat Bukti Serah Terima
            </a>
          )}
        </div>

        {/* Timeline */}
        <div className="bg-slate-900/50 p-4 rounded-xl border border-slate-600">
          <strong className="text-slate-300 block mb-3">Timeline:</strong>
          <div className="space-y-2 text-sm">
            <div className="flex items-start gap-3">
              <span className="text-blue-400 mt-1">📅</span>
              <div>
                <strong className="text-slate-300">Ditemukan:</strong>
                <p className="text-slate-400">
                  {Helpers.formatDateTime(archive.date_found)}
                </p>
              </div>
            </div>
            {archive.created_at && (
              <div className="flex items-start gap-3">
                <span className="text-blue-400 mt-1">📝</span>
                <div>
                  <strong className="text-slate-300">Dilaporkan:</strong>
                  <p className="text-slate-400">
                    {Helpers.formatDateTime(archive.created_at)}
                  </p>
                </div>
              </div>
            )}
            {archive.case_closed_at && (
              <div className="flex items-start gap-3">
                <span className="text-green-400 mt-1">✅</span>
                <div>
                  <strong className="text-slate-300">Ditutup:</strong>
                  <p className="text-slate-400">
                    {Helpers.formatDateTime(archive.case_closed_at)}
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    )}
  </Modal>
);