'use client';

import React from 'react';
import { Receipt, AlertCircle, CreditCard, Printer } from 'lucide-react';

export default function TagihanAktif() {
  return (
    <>
      <style>{`
        @media print {
          @page { size: A4 portrait; margin: 1.5cm; }
          body { background-color: white !important; }
        }
      `}</style>
      <div className="space-y-6 max-w-7xl mx-auto h-full flex flex-col pb-10 print:p-0 print:m-0 print:block">
        <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">Tagihan Aktif</h1>
            <p className="text-sm text-slate-500 mt-1">Daftar kewajiban administrasi yang perlu diselesaikan.</p>
          </div>
          <button 
            onClick={() => window.print()}
            className="bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded-lg font-medium text-sm flex items-center gap-2 shadow-sm transition-colors print:hidden"
          >
            <Printer className="w-4 h-4" />
            Cetak Tagihan
          </button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 print:grid-cols-2 print:gap-4">
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden relative print:border-slate-300 print:shadow-none print:break-inside-avoid">
            <div className="absolute top-0 right-0 p-4">
              <span className="bg-red-100 text-red-700 px-2 py-1 rounded text-xs font-bold uppercase tracking-wider print:border print:border-red-200">Menunggak</span>
            </div>
            <div className="p-6 border-b border-slate-100 print:p-4">
              <div className="w-10 h-10 bg-slate-50 rounded-lg flex items-center justify-center mb-4 print:hidden">
                <Receipt className="w-5 h-5 text-slate-600" />
              </div>
              <h3 className="font-bold text-slate-800 text-lg">SPP Bulan Juni 2026</h3>
              <p className="text-sm text-slate-500 mt-1">Jatuh tempo: 10 Juni 2026</p>
            </div>
            <div className="p-6 bg-slate-50 print:bg-white print:p-4">
              <p className="text-sm text-slate-500 font-medium">Beban Tagihan</p>
              <p className="text-2xl font-bold text-slate-800 mt-1">Rp 350.000</p>
              <button className="mt-6 w-full bg-emerald-600 hover:bg-emerald-700 text-white py-2 rounded-lg font-medium text-sm transition-colors flex items-center justify-center gap-2 print:hidden">
                <CreditCard className="w-4 h-4" />
                Bayar Sekarang
              </button>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden relative opacity-70 print:opacity-100 print:border-slate-300 print:shadow-none print:break-inside-avoid">
            <div className="absolute top-0 right-0 p-4">
              <span className="bg-emerald-100 text-emerald-700 px-2 py-1 rounded text-xs font-bold uppercase tracking-wider print:border print:border-emerald-200">Lunas</span>
            </div>
            <div className="p-6 border-b border-slate-100 print:p-4">
              <div className="w-10 h-10 bg-slate-50 rounded-lg flex items-center justify-center mb-4 print:hidden">
                <Receipt className="w-5 h-5 text-slate-600" />
              </div>
              <h3 className="font-bold text-slate-800 text-lg">Uang Gedung (Cicilan 1)</h3>
              <p className="text-sm text-slate-500 mt-1">Jatuh tempo: 15 Juli 2026</p>
            </div>
            <div className="p-6 bg-slate-50 print:bg-white print:p-4">
              <p className="text-sm text-slate-500 font-medium">Beban Tagihan</p>
              <p className="text-2xl font-bold text-slate-800 mt-1 line-through decoration-slate-300">Rp 1.500.000</p>
              <button disabled className="mt-6 w-full bg-slate-200 text-slate-500 py-2 rounded-lg font-medium text-sm cursor-not-allowed print:hidden">
                Telah Dibayar
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}