import { Wallet, TrendingUp, Bike, DollarSign, Calendar, Download, ArrowUpRight } from 'lucide-react';
import { investors, bikes } from '@/data/mockData';

const investor = investors[0];
const investorBikes = bikes.filter(b => b.investorId === investor?.id);

export default function InvestorPortfolioPage() {
  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">My Portfolio</h1>
          <p className="text-sm text-slate-500 mt-1">Track your investments</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 Statement
        </button>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <div className="flex items-center gap-3 mb-2">
            <Wallet className="w-5 h-5 text-purple-600" />
            <span className="text-sm text-slate-500">Invested</span>
          </div>
          <p className="text-2xl font-extrabold text-slate-800">৳{investor.totalInvested.toLocaleString()}</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <div className="flex items-center gap-3 mb-2">
            <TrendingUp className="w-5 h-5 text-green-600" />
            <span className="text-sm text-slate-500">Earnings</span>
          </div>
          <p className="text-2xl font-extrabold text-green-600">৳{investor.totalEarnings.toLocaleString()}</p>
          <span className="text-xs text-green-600 flex items-center gap-1 mt-1">
            <ArrowUpRight className="w-3 h-3" /> +2.3%
          </span>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <div className="flex items-center gap-3 mb-2">
            <Bike className="w-5 h-5 text-blue-600" />
            <span className="text-sm text-slate-500">Active Bikes</span>
          </div>
          <p className="text-2xl font-extrabold text-slate-800">{investor.activeBikes}</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <div className="flex items-center gap-3 mb-2">
            <DollarSign className="w-5 h-5 text-amber-600" />
            <span className="text-sm text-slate-500">ROI</span>
          </div>
          <p className="text-2xl font-extrabold text-slate-800">{investor.roi}%</p>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
        <div className="px-5 py-4 border-b border-slate-100">
          <h2 className="font-bold text-slate-800">My Bikes</h2>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-slate-50">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Bike</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Plate</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Location</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Status</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Earnings</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50">
              {investorBikes.map(bike => (
                <tr key={bike.id} className="hover:bg-slate-50">
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-3">
                      <Bike className="w-5 h-5 text-slate-400" />
                      <span className="text-sm font-medium text-slate-700">{bike.model}</span>
                    </div>
                  </td>
                  <td className="px-4 py-3 text-sm text-slate-600">{bike.plateNumber}</td>
                  <td className="px-4 py-3 text-sm text-slate-600">{bike.location}</td>
                  <td className="px-4 py-3">
                    <span className={`text-xs font-medium px-2.5 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>
                  </td>
                  <td className="px-4 py-3 text-sm font-semibold text-green-600">৳2,500</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}