import React from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { DollarSign, TrendingUp, Calendar, Award } from "lucide-react";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

export default function WorkforceEarnings() {
  const earningsData = [
    { month: 'Jan', earnings: 2400, hours: 96 },
    { month: 'Feb', earnings: 2800, hours: 112 },
    { month: 'Mar', earnings: 3200, hours: 128 },
    { month: 'Apr', earnings: 2600, hours: 104 },
    { month: 'May', earnings: 3400, hours: 136 },
  ];

  const stats = {
    totalEarnings: 14400,
    thisMonth: 3400,
    totalHours: 576,
    avgHourly: 25,
  };

  return (
    <div className="p-4 md:p-8 bg-slate-50 min-h-screen">
      <div className="max-w-7xl mx-auto">
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-[#1C323E]">My Earnings</h1>
          <p className="text-slate-500 mt-1">Track your income and hours worked</p>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <Card className="border-slate-200">
            <CardContent className="p-6">
              <DollarSign className="w-8 h-8 text-[#0A39DF] mb-2" />
              <p className="text-sm text-slate-500">Total Earnings (YTD)</p>
              <p className="text-3xl font-bold text-[#1C323E]">${stats.totalEarnings.toLocaleString()}</p>
            </CardContent>
          </Card>

          <Card className="border-slate-200">
            <CardContent className="p-6">
              <TrendingUp className="w-8 h-8 text-green-600 mb-2" />
              <p className="text-sm text-slate-500">This Month</p>
              <p className="text-3xl font-bold text-green-600">${stats.thisMonth.toLocaleString()}</p>
            </CardContent>
          </Card>

          <Card className="border-slate-200">
            <CardContent className="p-6">
              <Calendar className="w-8 h-8 text-blue-600 mb-2" />
              <p className="text-sm text-slate-500">Total Hours</p>
              <p className="text-3xl font-bold text-blue-600">{stats.totalHours}</p>
            </CardContent>
          </Card>

          <Card className="border-slate-200">
            <CardContent className="p-6">
              <Award className="w-8 h-8 text-purple-600 mb-2" />
              <p className="text-sm text-slate-500">Avg Hourly</p>
              <p className="text-3xl font-bold text-purple-600">${stats.avgHourly}</p>
            </CardContent>
          </Card>
        </div>

        {/* Earnings Chart */}
        <Card className="mb-8 border-slate-200">
          <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b">
            <CardTitle>Monthly Earnings</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={earningsData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="month" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="earnings" fill="#0A39DF" name="Earnings ($)" />
                <Bar dataKey="hours" fill="#10b981" name="Hours Worked" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* Payment History */}
        <Card className="border-slate-200">
          <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b">
            <CardTitle>Recent Payments</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="space-y-4">
              {[
                { date: "May 15, 2025", event: "Tech Conference 2025", hours: 32, amount: 800 },
                { date: "May 8, 2025", event: "Product Launch", hours: 24, amount: 600 },
                { date: "May 1, 2025", event: "Corporate Event", hours: 40, amount: 1000 },
              ].map((payment, index) => (
                <div key={index} className="flex items-center justify-between p-4 bg-slate-50 rounded-lg border border-slate-200">
                  <div className="flex-1">
                    <h4 className="font-semibold text-[#1C323E]">{payment.event}</h4>
                    <p className="text-sm text-slate-500 mt-1">{payment.date} • {payment.hours} hours</p>
                  </div>
                  <p className="text-2xl font-bold text-[#0A39DF]">${payment.amount}</p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}