'use client';

import React from 'react';
import { Search, Download } from 'lucide-react';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

export default function RiwayatPembayaranWali() {
  const handleDownloadReceipt = (trx: any) => {
    const doc = new jsPDF({ format: 'a5', orientation: 'landscape' });
    
    // Header
    doc.setFontSize(18);
    doc.setTextColor(5, 150, 105); // emerald-600
    doc.setFont('helvetica', 'bold');
    doc.text("E-KUITANSI PEMBAYARAN", 105, 25, { align: "center" });
    
    doc.setFontSize(10);
    doc.setTextColor(100, 116, 139); // slate-500
    doc.setFont('helvetica', 'normal');
    doc.text("MA Mamba'ul Ma'arif", 105, 32, { align: "center" });
    doc.text("Jl. Raya Deandles No. 388 Banjarwati Paciran Lamongan", 105, 38, { align: "center" });
    
    // Line separator
    doc.setDrawColor(226, 232, 240); // slate-200
    doc.line(15, 45, 195, 45);
    
    // Transaction Details
    autoTable(doc, {
      startY: 55,
      theme: 'plain',
      body: [
        ['Tanggal Pembayaran', `: ${trx.time}`],
        ['Jenis Tagihan', `: ${trx.type}`],
        ['Metode Pembayaran', `: ${trx.method}`],
        ['Status Transaksi', `: LUNAS / ${trx.status}`],
      ],
      styles: { fontSize: 10, textColor: [30, 41, 59], cellPadding: 2 },
      columnStyles: {
        0: { fontStyle: 'bold', cellWidth: 50 },
        1: { cellWidth: 100 }
      },
      margin: { left: 20 }
    });

    const finalY = (doc as any).lastAutoTable.finalY + 10;
    
    // Amount Box
    doc.setFillColor(248, 250, 252); // slate-50
    doc.setDrawColor(226, 232, 240);
    doc.setLineWidth(0.5);
    doc.roundedRect(20, finalY, 170, 25, 3, 3, 'FD');
    
    doc.setFontSize(11);
    doc.setTextColor(71, 85, 105);
    doc.setFont('helvetica', 'bold');
    doc.text("Nominal Pembayaran:", 30, finalY + 16);
    
    doc.setFontSize(16);
    doc.setTextColor(5, 150, 105); // emerald-600
    doc.text(trx.cost, 180, finalY + 17, { align: "right" });
    
    // Footer notes
    doc.setFontSize(8);
    doc.setTextColor(148, 163, 184); // slate-400
    doc.setFont("helvetica", "normal");
    doc.text("Dokumen ini dibuat otomatis oleh sistem dan sah sebagai bukti pembayaran.", 105, 135, { align: "center" });
    
    // Download
    const fileName = `Kuitansi_${trx.type.replace(/\s+/g, '_')}_${trx.time.replace(/\s+/g, '')}.pdf`;
    doc.save(fileName);
  };

  return (
    <div className="space-y-6 max-w-7xl mx-auto h-full flex flex-col pb-8">
      <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">Riwayat Pembayaran</h1>
          <p className="text-sm text-slate-500 mt-1">Daftar transaksi yang pernah dilakukan beserta e-kuitansi.</p>
        </div>
      </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">Buku Transaksi Ananda</h3>
          <div className="relative w-full 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 transaksi..." 
              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 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">Tgl. Bayar</th>
                <th className="px-6 py-4">Jenis Tagihan</th>
                <th className="px-6 py-4">Metode</th>
                <th className="px-6 py-4">Nominal</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">
              {[
                { time: '10 Mei 2026', type: 'SPP Bulan Mei 2026', method: 'Virtual Account BSI', cost: 'Rp 350.000', status: 'Berhasil' },
                { time: '12 Apr 2026', type: 'SPP Bulan April 2026', method: 'Transfer Manual', cost: 'Rp 350.000', status: 'Berhasil' },
              ].map((trx, i) => (
                <tr key={i} className="hover:bg-slate-50 transition-colors">
                  <td className="px-6 py-4 text-slate-500">{trx.time}</td>
                  <td className="px-6 py-4 font-medium text-slate-800">{trx.type}</td>
                  <td className="px-6 py-4 text-slate-600">{trx.method}</td>
                  <td className="px-6 py-4 font-bold text-slate-800">{trx.cost}</td>
                  <td className="px-6 py-4"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs font-semibold">{trx.status}</span></td>
                  <td className="px-6 py-4 text-right">
                    <button 
                      onClick={() => handleDownloadReceipt(trx)}
                      className="text-emerald-600 hover:text-emerald-800 font-medium flex items-center justify-end gap-1 w-full"
                    >
                      <Download className="w-4 h-4" /> Buka E-Kuitansi
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}