import { FileText, Download, Calendar, BarChart3, PieChart, TrendingUp, Bike, Users } from 'lucide-react';

export default function ReportsPage() {
  return (
    <div className="p-4 lg:p-6">
      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
        <div>
          <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Reports</h1>
          <p className="text-sm text-slate-500 mt-1">Analytics and insights</p>
        </div>
        <button className="py-2 px-4 bg-accent text-white rounded-lg text-sm font-semibold hover:bg-accent-dark flex items-center gap-2">
          <Download className="w-4 h-4" /> Export All Reports
        </button>
      </div>

      <div className="grid lg:grid-cols-3 gap-6 mb-8">
        <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
              <Bike className="w-5 h-5 text-blue-600" />
            </div>
            <h3 className="font-semibold text-slate-800">Fleet Utilization</h3>
          </div>
          <p className="text-3xl font-extrabold text-slate-800 mb-2">78%</p>
          <p className="text-sm text-green-600">+5% from last month</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center">
              <Users className="w-5 h-5 text-green-600" />
            </div>
            <h3 className="font-semibold text-slate-800">Active Bikers</h3>
          </div>
          <p className="text-3xl font-extrabold text-slate-800 mb-2">89</p>
          <p className="text-sm text-green-600">+12 new this month</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center">
              <TrendingUp className="w-5 h-5 text-purple-600" />
            </div>
            <h3 className="font-semibold text-slate-800">Avg. Daily Revenue</h3>
          </div>
          <p className="text-3xl font-extrabold text-slate-800 mb-2">৳45.6k</p>
          <p className="text-sm text-green-600">+23% from last month</p>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-5 mb-6">
        <h2 className="font-bold text-slate-800 mb-4">Available Reports</h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {[
            { title: 'Revenue Report', desc: 'Daily, weekly, monthly revenue', icon: BarChart3 },
            { title: 'Fleet Utilization', desc: 'Bike usage and availability', icon: PieChart },
            { title: 'Biker Activity', desc: 'Rides, hours, distance', icon: TrendingUp },
            { title: 'Damage Report', desc: 'Incidents and claims', icon: FileText },
            { title: 'KYC Summary', desc: 'Verification stats', icon: Users },
            { title: 'Investment ROI', desc: 'Investor returns', icon: TrendingUp },
          ].map((report, index) => {
            const Icon = report.icon;
            return (
              <div key={index} className="p-4 border border-slate-200 rounded-xl hover:border-accent hover:shadow-md transition-all cursor-pointer">
                <Icon className="w-6 h-6 text-accent mb-2" />
                <h3 className="font-semibold text-slate-800">{report.title}</h3>
                <p className="text-sm text-slate-500">{report.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}