import StatCard from '@/components/StatCard';
import TransactionList from '@/components/TransactionList';
import { investors, bikes, transactions } from '@/data/mockData';
import { Wallet, TrendingUp, Bike, Target, DollarSign, FileText, Phone, BarChart3, Send, ArrowDownToLine } from 'lucide-react';

export default function InvestorPage() {
  const investor = investors[0];
  const investorBikes = bikes.filter(b => b.investorId === investor?.id || b.status === 'rented');

  return (
    <div className="p-4 lg:p-6">
      <div className="mb-6">
        <h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Investor Dashboard</h1>
        <p className="text-sm text-slate-500">Track your investments and earnings</p>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <StatCard label="Total Invested" value={`৳${(investor.totalInvested / 1000).toFixed(0)}k`} icon={Wallet} color="text-investor" />
        <StatCard label="Total Earnings" value={`৳${(investor.totalEarnings / 1000).toFixed(1)}k`} icon={TrendingUp} color="text-green-600" trend="+2.3%" trendUp />
        <StatCard label="Active Bikes" value={investor.activeBikes} icon={Bike} color="text-biker" />
        <StatCard label="ROI" value={`${investor.roi}%`} icon={Target} color="text-purple-600" />
      </div>

      <div className="grid lg:grid-cols-2 gap-6 mb-6">
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <div className="flex items-center justify-between mb-4">
            <h2 className="font-bold text-slate-800">My Portfolio</h2>
            <span className="text-xs font-semibold px-2 py-1 bg-purple-100 text-purple-700 rounded-full">
              {investorBikes.length} bikes
            </span>
          </div>
          <div className="space-y-3">
            {investorBikes.map(bike => (
              <div key={bike.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                <div>
                  <p className="font-medium text-slate-700">{bike.model}</p>
                  <p className="text-xs text-slate-400">{bike.plateNumber}</p>
                </div>
                <span className={`text-xs font-medium px-2 py-1 rounded-full ${
                  bike.status === 'rented' ? 'bg-green-100 text-green-700' :
                  bike.status === 'available' ? 'bg-blue-100 text-blue-700' :
                  'bg-amber-100 text-amber-700'
                }`}>
                  {bike.status}
                </span>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <h2 className="font-bold text-slate-800 mb-4">Quick Actions</h2>
          <div className="grid grid-cols-2 gap-3">
            <button className="py-3 bg-investor text-white rounded-lg font-semibold text-sm hover:bg-investor-dark flex items-center justify-center gap-2">
              <DollarSign className="w-4 h-4" /> Withdraw
            </button>
            <button className="py-3 bg-purple-600 text-white rounded-lg font-semibold text-sm hover:bg-purple-700 flex items-center justify-center gap-2">
              <FileText className="w-4 h-4" /> Statement
            </button>
            <button className="py-3 border border-slate-200 text-slate-600 rounded-lg font-semibold text-sm hover:bg-slate-50 flex items-center justify-center gap-2">
              <Phone className="w-4 h-4" /> Support
            </button>
            <button className="py-3 border border-slate-200 text-slate-600 rounded-lg font-semibold text-sm hover:bg-slate-50 flex items-center justify-center gap-2">
              <BarChart3 className="w-4 h-4" /> Analytics
            </button>
          </div>
        </div>
      </div>

      <div>
        <h2 className="text-lg font-bold text-slate-800 mb-3">Transaction History</h2>
        <TransactionList transactions={transactions.filter(t => t.userId === 'u7')} />
      </div>
    </div>
  );
}