'use client';

import React, { useState } from 'react';
import { Receipt, Search, Filter, X, Send, Eye, FileText, Download } from 'lucide-react';

export default function KelolaTagihan() {
  const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false);
  const [selectedBatch, setSelectedBatch] = useState<any>(null);

  const handlePreview = (item: any) => {
    setSelectedBatch(item);
    setIsPreviewModalOpen(true);
  };

  return (
    <div className="space-y-6 max-w-7xl mx-auto h-full flex flex-col relative">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-800 tracking-tight">Kelola Tagihan</h1>
          <p className="text-sm text-slate-500 mt-1">Generate dan kelola tagihan siswa massal atau individu.</p>
        </div>
        <button className="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg font-medium text-sm flex items-center gap-2 shadow-sm transition-colors">
          Generate Tagihan Massal
        </button>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-200 flex-1 flex flex-col">
        <div className="p-6 border-b border-slate-100 flex flex-col md:flex-row justify-between items-center gap-4">
          <h3 className="font-bold text-slate-800 w-full md:w-auto">Daftar Tagihan Aktif & Draft</h3>
          <div className="flex w-full md:w-auto gap-2">
            <button className="px-3 py-2 border border-slate-200 rounded-lg text-slate-600 flex items-center gap-2 hover:bg-slate-50 transition-colors">
              <Filter className="w-4 h-4" /> <span className="text-sm">Filter</span>
            </button>
            <div className="relative flex-1 md:w-64">
              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
              <input 
                type="text" 
                placeholder="Cari tagihan..." 
                className="w-full pl-9 pr-4 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all"
              />
            </div>
          </div>
        </div>
        
        <div className="overflow-x-auto flex-1">
          <table className="w-full text-sm text-left">
            <thead className="bg-slate-50/50 text-slate-500 text-xs uppercase font-semibold border-b border-slate-100">
              <tr>
                <th className="px-6 py-4">ID Tagihan</th>
                <th className="px-6 py-4">Tipe</th>
                <th className="px-6 py-4">Periode</th>
                <th className="px-6 py-4">Target Siswa</th>
                <th className="px-6 py-4">Status</th>
                <th className="px-6 py-4 text-right">Aksi</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {[
                { id: 'BATCH-2409', type: 'SPP', period: 'September 2024', target: '450 Siswa', progress: 0, status: 'Draft', amount: 'Rp 350.000' },
                { id: 'BATCH-2408', type: 'SPP', period: 'Agustus 2024', target: '450 Siswa', progress: 12, status: 'Sent', amount: 'Rp 350.000' },
                { id: 'BATCH-GDG1', type: 'Uang Gedung', period: 'Tahun Ajaran 2024/2025', target: '150 Siswa', progress: 45, status: 'Sent', amount: 'Rp 3.000.000' },
              ].map((item, i) => (
                <tr key={i} className="hover:bg-slate-50 transition-colors">
                  <td className="px-6 py-4 font-mono text-slate-500 text-xs font-bold">{item.id}</td>
                  <td className="px-6 py-4 font-medium text-slate-800">{item.type}</td>
                  <td className="px-6 py-4 text-slate-600">{item.period}</td>
                  <td className="px-6 py-4 text-slate-600">{item.target}</td>
                  <td className="px-6 py-4">
                    {item.status === 'Draft' ? (
                      <span className="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs font-bold">DRAFT</span>
                    ) : (
                      <div className="flex items-center gap-2 w-32">
                        <div className="flex-1 h-2 bg-slate-100 rounded-full overflow-hidden">
                          <div className="h-full bg-emerald-500 rounded-full" style={{ width: `${item.progress}%` }}></div>
                        </div>
                        <span className="text-xs font-bold text-slate-600">{item.progress}%</span>
                      </div>
                    )}
                  </td>
                  <td className="px-6 py-4 text-right">
                    <div className="flex items-center justify-end gap-3">
                      <button 
                        onClick={() => handlePreview(item)} 
                        className="text-slate-600 hover:text-emerald-600 font-medium flex items-center gap-1 transition-colors"
                      >
                        <Eye className="w-4 h-4" /> Preview
                      </button>
                      {item.status !== 'Draft' && (
                         <button className="text-emerald-600 hover:text-emerald-800 font-medium transition-colors">
                           Detail
                         </button>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Invoice Preview Modal */}
      {isPreviewModalOpen && selectedBatch && (
        <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 rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200">
            {/* Modal Header */}
            <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-600">
                  <Receipt className="w-5 h-5" />
                </div>
                <div>
                  <h2 className="text-lg font-bold text-slate-800">Preview Invoice Tagihan</h2>
                  <p className="text-xs text-slate-500 font-mono mt-0.5">Ref: {selectedBatch.id}</p>
                </div>
              </div>
              <button 
                onClick={() => setIsPreviewModalOpen(false)}
                className="w-8 h-8 rounded-full hover:bg-slate-200 flex items-center justify-center text-slate-500 transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Modal Body / Preview Area */}
            <div className="p-6 md:p-8 overflow-y-auto flex-1 bg-slate-50">
              <div className="bg-white border border-slate-200 shadow-sm rounded-xl p-8 max-w-lg mx-auto">
                {/* Invoice Header */}
                <div className="flex justify-between items-start border-b border-slate-100 pb-6 mb-6">
                  <div>
                    <h1 className="text-2xl font-bold text-slate-800">INVOICE</h1>
                    <p className="text-slate-500 text-sm mt-1">MA Mamba'ul Ma'arif</p>
                  </div>
                  <div className="text-right">
                    <p className="text-sm font-bold text-slate-800">{selectedBatch.type}</p>
                    <p className="text-xs text-slate-500 mt-1">{selectedBatch.period}</p>
                  </div>
                </div>

                {/* Student Info Placeholder */}
                <div className="mb-6 grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-xs text-slate-500 mb-1 uppercase font-bold tracking-wider">Ditagihkan Kepada</p>
                    <p className="font-medium text-slate-800 text-sm">[Nama Siswa]</p>
                    <p className="text-slate-500 text-sm">[Kelas/Jurusan]</p>
                    <p className="text-slate-500 text-sm font-mono mt-1">NIS: [NIS Siswa]</p>
                  </div>
                  <div className="text-right">
                    <p className="text-xs text-slate-500 mb-1 uppercase font-bold tracking-wider">Tanggal Diterbitkan</p>
                    <p className="font-medium text-slate-800 text-sm">{new Date().toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}</p>
                  </div>
                </div>

                {/* Invoice Items */}
                <table className="w-full text-sm mb-6">
                  <thead>
                    <tr className="border-b border-slate-200 text-left text-slate-500">
                      <th className="py-2 font-medium">Deskripsi</th>
                      <th className="py-2 text-right font-medium">Jumlah</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td className="py-4 text-slate-800 border-b border-slate-100">{selectedBatch.type} - {selectedBatch.period}</td>
                      <td className="py-4 text-right font-medium text-slate-800 border-b border-slate-100">{selectedBatch.amount}</td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <td className="py-4 font-bold text-slate-800 text-right">Total Tagihan</td>
                      <td className="py-4 font-bold text-emerald-600 text-right text-lg">{selectedBatch.amount}</td>
                    </tr>
                  </tfoot>
                </table>

                {/* Footer Notes */}
                <div className="bg-slate-50 rounded-lg p-4 border border-slate-100">
                  <p className="text-xs text-slate-500 font-medium mb-1">Catatan:</p>
                  <p className="text-xs text-slate-600">Mohon lakukan pembayaran sebelum tanggal 10 setiap bulannya melalui Virtual Account yang terdaftar.</p>
                </div>
              </div>
            </div>

            {/* Modal Actions */}
            <div className="px-6 py-4 border-t border-slate-100 bg-white flex justify-between items-center">
              <button className="text-sm font-medium text-slate-600 flex items-center gap-2 hover:text-slate-800 transition-colors">
                <Download className="w-4 h-4" /> Download PDF Sample
              </button>
              <div className="flex gap-3">
                <button 
                  onClick={() => setIsPreviewModalOpen(false)}
                  className="px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 transition-colors"
                >
                  Tutup
                </button>
                {selectedBatch.status === 'Draft' && (
                  <button 
                    onClick={() => {
                      setIsPreviewModalOpen(false);
                      // Action logic to dispatch
                    }}
                    className="px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors flex items-center gap-2"
                  >
                    <Send className="w-4 h-4" /> Kirim Tagihan ({selectedBatch.target})
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}