// assets/js/pages/admin/tabs/ReportsTab.js

const ReportsTab = ({ handlers, loading }) => {
  const { handleExport } = handlers;

  return (
    <div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 shadow-xl border border-slate-700">
      <h2 className="text-xl font-semibold mb-6 text-white">Export Laporan</h2>
      <div className="space-y-4">
        <div>
          <label className="block font-semibold mb-2 text-slate-300">
            Periode
          </label>
          <select
            name="period"
            className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
          >
            <option value="month">Bulan Ini</option>
            <option value="semester">Semester Ini</option>
            <option value="year">Tahun Ini</option>
          </select>
        </div>
        <div>
          <label className="block font-semibold mb-2 text-slate-300">
            Tipe Laporan
          </label>
          <select
            name="report_type"
            className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
          >
            <option value="items">Barang Ditemukan</option>
            <option value="archives">Arsip</option>
            <option value="claims">Klaim</option>
          </select>
        </div>
        <div className="flex gap-4 pt-4">
          <button
            onClick={() => handleExport("pdf")}
            disabled={loading}
            className="flex-1 px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl hover:from-green-700 hover:to-green-800 transition font-semibold shadow-lg disabled:from-slate-600 disabled:to-slate-700 disabled:cursor-not-allowed"
          >
            {loading ? "⏳ Exporting..." : "📄 Export PDF"}
          </button>
          <button
            onClick={() => handleExport("excel")}
            disabled={loading}
            className="flex-1 px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl hover:from-green-700 hover:to-green-800 transition font-semibold shadow-lg disabled:from-slate-600 disabled:to-slate-700 disabled:cursor-not-allowed"
          >
            {loading ? "⏳ Exporting..." : "📊 Export Excel"}
          </button>
        </div>
      </div>
    </div>
  );
};