'use client';

import React from 'react';
import { X, Download, Clock, CheckCircle } from 'lucide-react';
import { StatusBadge } from './status-badge';

export function PaymentModal({ isOpen, onClose, data }: any) {
  if (!isOpen || !data) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm">
      <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-xl w-full max-w-2xl overflow-hidden flex flex-col max-h-[90vh] animate-in fade-in zoom-in-95 duration-200">
        <div className="flex items-center justify-between p-4 border-b border-slate-100 dark:border-slate-800">
          <h3 className="font-bold text-lg text-slate-800 dark:text-slate-100">Detail Pembayaran</h3>
          <button onClick={onClose} className="p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
            <X className="w-5 h-5" />
          </button>
        </div>
        
        <div className="p-6 overflow-y-auto flex-1 flex flex-col md:flex-row gap-6">
          <div className="flex-1 space-y-6">
            <div>
              <p className="text-xs text-slate-500 font-medium mb-1">Informasi Siswa</p>
              <p className="font-bold text-slate-900 dark:text-slate-100">{data.name}</p>
              <p className="text-sm text-slate-600 dark:text-slate-400">{data.class} • {data.id}</p>
            </div>
            
            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className="text-xs text-slate-500 font-medium mb-1">Jenis Tagihan</p>
                <p className="font-medium text-slate-800 dark:text-slate-200">{data.bill}</p>
              </div>
              <div>
                <p className="text-xs text-slate-500 font-medium mb-1">Nominal</p>
                <p className="font-bold text-emerald-600 dark:text-emerald-400">{data.amount}</p>
              </div>
              <div>
                <p className="text-xs text-slate-500 font-medium mb-1">Tanggal Transfer</p>
                <p className="font-medium text-slate-800 dark:text-slate-200">{data.date}</p>
              </div>
              <div>
                <p className="text-xs text-slate-500 font-medium mb-1">Bank Tujuan</p>
                <p className="font-medium text-slate-800 dark:text-slate-200">{data.bank}</p>
              </div>
            </div>

            <div>
              <p className="text-xs text-slate-500 font-medium mb-3">Status Pembayaran</p>
              <StatusBadge status={data.status || 'Pending'} type={data.status || 'pending'} />
            </div>

            <div>
              <p className="text-xs text-slate-500 font-medium mb-3">Riwayat Status</p>
              <div className="space-y-4">
                <div className="flex gap-3">
                  <div className="relative flex flex-col items-center">
                    <div className="w-4 h-4 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 flex items-center justify-center">
                      <CheckCircle className="w-3 h-3" />
                    </div>
                    <div className="w-0.5 h-full bg-slate-100 dark:bg-slate-800 my-1"></div>
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-slate-800 dark:text-slate-200">Tagihan Dibuat</p>
                    <p className="text-xs text-slate-500">10 Jun 2026, 08:30 WIB</p>
                  </div>
                </div>
                <div className="flex gap-3">
                  <div className="relative flex flex-col items-center">
                    <div className="w-4 h-4 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-600 flex items-center justify-center">
                      <Clock className="w-3 h-3" />
                    </div>
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-slate-800 dark:text-slate-200">Bukti Transfer Diunggah</p>
                    <p className="text-xs text-slate-500">{data.date}, 14:15 WIB</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div className="md:w-64 space-y-3">
            <p className="text-xs text-slate-500 font-medium">Bukti Transfer</p>
            <div className="aspect-[3/4] bg-slate-100 dark:bg-slate-800 rounded-xl overflow-hidden border border-slate-200 dark:border-slate-700 relative">
              {/* Using native img tag for the placeholder mockup without needing next/image domains */}
              <img src="https://picsum.photos/seed/proof/400/600" alt="Bukti Transfer" className="w-full h-full object-cover" />
            </div>
            <button className="w-full py-2 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-lg text-sm font-semibold text-slate-700 dark:text-slate-300 transition-colors flex items-center justify-center gap-2">
              <Download className="w-4 h-4" /> Unduh Gambar
            </button>
          </div>
        </div>

        <div className="p-4 border-t border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/50 flex justify-end gap-3 shrink-0">
          <button onClick={onClose} className="px-4 py-2 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 rounded-lg text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
            Tutup
          </button>
          <button className="px-4 py-2 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 rounded-lg text-sm font-medium hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">
            Tolak
          </button>
          <button className="px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors">
            Verifikasi Pembayaran
          </button>
        </div>
      </div>
    </div>
  );
}