const LostItemDetailModal = ({ state }) => {
  const {
    selectedLostItemDetail,
    showLostItemDetailModal,
    setShowLostItemDetailModal,
  } = state;

  if (!showLostItemDetailModal || !selectedLostItemDetail) return null;

  return (
    <Modal
      isOpen={showLostItemDetailModal}
      onClose={() => setShowLostItemDetailModal(false)}
      title="📋 Detail Laporan Barang Hilang"
      size="large"
    >
      <div className="space-y-6">
        {/* Info Barang */}
        <div className="bg-slate-700/50 rounded-xl p-6 border border-slate-600">
          <h4 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            🔍 Informasi Barang
          </h4>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-slate-400 text-sm">ID Laporan</label>
              <p className="text-white font-semibold">
                #{selectedLostItemDetail.id}
              </p>
            </div>
            <div>
              <label className="text-slate-400 text-sm">Nama Barang</label>
              <p className="text-white font-semibold">
                {selectedLostItemDetail.name}
              </p>
            </div>
            <div>
              <label className="text-slate-400 text-sm">Kategori</label>
              <p className="text-white">{selectedLostItemDetail.category}</p>
            </div>
            <div>
              <label className="text-slate-400 text-sm">Warna</label>
              <p className="text-white">
                {selectedLostItemDetail.color || "-"}
              </p>
            </div>
            <div>
              <label className="text-slate-400 text-sm">Lokasi Hilang</label>
              <p className="text-white">
                {selectedLostItemDetail.location || "-"}
              </p>
            </div>
            <div>
              <label className="text-slate-400 text-sm">Tanggal Hilang</label>
              <p className="text-white">
                {Helpers.formatDate(selectedLostItemDetail.date_lost)}
              </p>
            </div>
            <div>
              <label className="text-slate-400 text-sm">Status</label>
              <span
                className={`inline-block px-3 py-1 rounded-full text-xs font-semibold ${Helpers.getStatusBadgeClass(
                  selectedLostItemDetail.status
                )}`}
              >
                {selectedLostItemDetail.status}
              </span>
            </div>
            <div>
              <label className="text-slate-400 text-sm">Dibuat</label>
              <p className="text-white">
                {Helpers.formatDateTime(selectedLostItemDetail.created_at)}
              </p>
            </div>
          </div>
        </div>

        {/* Deskripsi */}
        <div className="bg-slate-700/50 rounded-xl p-6 border border-slate-600">
          <h4 className="text-lg font-semibold text-white mb-3">
            📝 Deskripsi
          </h4>
          <p className="text-slate-300 whitespace-pre-wrap">
            {selectedLostItemDetail.description}
          </p>
        </div>

        {/* Info Pelapor */}
        <div className="bg-slate-700/50 rounded-xl p-6 border border-slate-600">
          <h4 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            👤 Informasi Pelapor
          </h4>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-slate-400 text-sm">User ID</label>
              <p className="text-white">#{selectedLostItemDetail.user_id}</p>
            </div>
            <div>
              <label className="text-slate-400 text-sm">Nama</label>
              <p className="text-white font-semibold">
                {selectedLostItemDetail.user_name}
              </p>
            </div>
          </div>
        </div>

        {/* Direct Claim Info (jika ada) */}
        {selectedLostItemDetail.direct_claim && (
          <div className="bg-yellow-500/10 border-2 border-yellow-500/50 rounded-xl p-6">
            <h4 className="text-lg font-semibold text-yellow-400 mb-4 flex items-center gap-2">
              🎯 Direct Claim
            </h4>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-slate-400 text-sm">Claim ID</label>
                <p className="text-white">
                  #{selectedLostItemDetail.direct_claim.id}
                </p>
              </div>
              <div>
                <label className="text-slate-400 text-sm">Status Claim</label>
                <span
                  className={`inline-block px-3 py-1 rounded-full text-xs font-semibold ${Helpers.getStatusBadgeClass(
                    selectedLostItemDetail.direct_claim.status
                  )}`}
                >
                  {selectedLostItemDetail.direct_claim.status}
                </span>
              </div>
              <div>
                <label className="text-slate-400 text-sm">Penemu</label>
                <p className="text-white">
                  {selectedLostItemDetail.direct_claim.user_name}
                </p>
              </div>
              <div>
                <label className="text-slate-400 text-sm">Kontak</label>
                <p className="text-white">
                  {selectedLostItemDetail.direct_claim.contact}
                </p>
              </div>
              <div className="col-span-2">
                <label className="text-slate-400 text-sm">
                  Deskripsi Claim
                </label>
                <p className="text-white mt-1">
                  {selectedLostItemDetail.direct_claim.description}
                </p>
              </div>
            </div>
          </div>
        )}
      </div>
    </Modal>
  );
};