
import React from "react";
import { base44 } from "@/api/base44Client";
import { useQuery } from "@tanstack/react-query";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Users, MapPin, DollarSign, Award, BookOpen, TrendingUp, Star, Clock, ArrowLeft, Calendar } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import PageHeader from "../components/common/PageHeader";

export default function WorkforceDashboard() {
  const navigate = useNavigate();

  const { data: staff } = useQuery({
    queryKey: ['staff'],
    queryFn: () => base44.entities.Staff.list('-rating'),
    initialData: [],
  });

  const topPerformers = staff.slice(0, 6);
  const avgRating = staff.length > 0 ? (staff.reduce((sum, s) => sum + (s.rating || 0), 0) / staff.length).toFixed(1) : 0;
  const avgCoverage = staff.length > 0 ? Math.round(staff.reduce((sum, s) => sum + (s.shift_coverage_percentage || 0), 0) / staff.length) : 0;

  return (
    <div className="p-4 md:p-8 bg-slate-50 min-h-screen">
      <div className="max-w-7xl mx-auto">
        <PageHeader
          title="Workforce App (Krower)"
          subtitle="Job feed, check-ins, training, and earnings"
        />

        {/* Key Metrics */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <Card className="border-slate-200 shadow-lg">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-2">
                <Users className="w-8 h-8 text-[#0A39DF]" />
                <Badge className="bg-blue-100 text-blue-700">{staff.length}</Badge>
              </div>
              <p className="text-sm text-slate-500">Active Workers</p>
              <p className="text-3xl font-bold text-[#1C323E]">{staff.length}</p>
            </CardContent>
          </Card>

          <Card className="border-slate-200 shadow-lg">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-2">
                <Star className="w-8 h-8 text-yellow-500" />
                <Badge className="bg-yellow-100 text-yellow-700">{avgRating}/5</Badge>
              </div>
              <p className="text-sm text-slate-500">Avg Rating</p>
              <p className="text-3xl font-bold text-[#1C323E]">{avgRating}</p>
            </CardContent>
          </Card>

          <Card className="border-slate-200 shadow-lg">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-2">
                <TrendingUp className="w-8 h-8 text-green-600" />
                <Badge className="bg-green-100 text-green-700">{avgCoverage}%</Badge>
              </div>
              <p className="text-sm text-slate-500">Avg Coverage</p>
              <p className="text-3xl font-bold text-[#1C323E]">{avgCoverage}%</p>
            </CardContent>
          </Card>

          <Card className="border-slate-200 shadow-lg">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-2">
                <BookOpen className="w-8 h-8 text-purple-600" />
                <Badge className="bg-purple-100 text-purple-700">89%</Badge>
              </div>
              <p className="text-sm text-slate-500">Training Complete</p>
              <p className="text-3xl font-bold text-[#1C323E]">89%</p>
            </CardContent>
          </Card>
        </div>

        {/* Top Performers */}
        <Card className="mb-8 border-slate-200 shadow-lg">
          <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b border-slate-100">
            <CardTitle className="text-[#1C323E] flex items-center gap-2">
              <Award className="w-5 h-5 text-amber-600" />
              Top Performers
            </CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {topPerformers.map((worker, index) => (
                <div key={worker.id} className="p-6 rounded-xl border-2 border-slate-200 hover:border-[#0A39DF] hover:shadow-lg transition-all relative">
                  {index < 3 && (
                    <div className="absolute -top-3 -right-3 w-8 h-8 bg-gradient-to-br from-amber-400 to-amber-600 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-lg">
                      {index + 1}
                    </div>
                  )}
                  <div className="flex items-center gap-3 mb-4">
                    <div className="w-16 h-16 bg-gradient-to-br from-[#0A39DF] to-[#1C323E] rounded-xl flex items-center justify-center text-white font-bold text-xl">
                      {worker.initial || worker.employee_name?.charAt(0)}
                    </div>
                    <div className="flex-1">
                      <h4 className="font-bold text-[#1C323E]">{worker.employee_name}</h4>
                      <p className="text-sm text-slate-500">{worker.position}</p>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4 mb-4">
                    <div>
                      <p className="text-xs text-slate-500">Rating</p>
                      <div className="flex items-center gap-1">
                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                        <span className="font-bold text-[#1C323E]">{(worker.rating || 0).toFixed(1)}</span>
                      </div>
                    </div>
                    <div>
                      <p className="text-xs text-slate-500">Coverage</p>
                      <span className="font-bold text-green-600">{worker.shift_coverage_percentage || 0}%</span>
                    </div>
                  </div>
                  <Badge className="w-full justify-center bg-blue-100 text-blue-700">
                    Tier: {(worker.rating || 0) >= 4.5 ? 'Gold' : (worker.rating || 0) >= 4.0 ? 'Silver' : 'Bronze'}
                  </Badge>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Feature Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <Card className="border-slate-200 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1">
            <CardContent className="p-6 text-center">
              <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#0A39DF] to-[#1C323E] rounded-xl flex items-center justify-center">
                <Calendar className="w-8 h-8 text-white" />
              </div>
              <h3 className="font-bold text-[#1C323E] mb-2">Job Feed</h3>
              <p className="text-sm text-slate-500 mb-4">Browse available shifts</p>
              <Badge className="bg-green-100 text-green-700">24 Available</Badge>
            </CardContent>
          </Card>

          <Card className="border-slate-200 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1">
            <CardContent className="p-6 text-center">
              <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-emerald-500 to-emerald-700 rounded-xl flex items-center justify-center">
                <MapPin className="w-8 h-8 text-white" />
              </div>
              <h3 className="font-bold text-[#1C323E] mb-2">Geo Check-In</h3>
              <p className="text-sm text-slate-500 mb-4">Clock in/out at events</p>
              <Badge className="bg-blue-100 text-blue-700">Location-based</Badge>
            </CardContent>
          </Card>

          <Card className="border-slate-200 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1">
            <CardContent className="p-6 text-center">
              <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-purple-500 to-purple-700 rounded-xl flex items-center justify-center">
                <BookOpen className="w-8 h-8 text-white" />
              </div>
              <h3 className="font-bold text-[#1C323E] mb-2">KROW University</h3>
              <p className="text-sm text-slate-500 mb-4">Training & certifications</p>
              <Badge className="bg-purple-100 text-purple-700">89% Complete</Badge>
            </CardContent>
          </Card>

          <Card className="border-slate-200 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1">
            <CardContent className="p-6 text-center">
              <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-amber-500 to-amber-700 rounded-xl flex items-center justify-center">
                <DollarSign className="w-8 h-8 text-white" />
              </div>
              <h3 className="font-bold text-[#1C323E] mb-2">Earnings</h3>
              <p className="text-sm text-slate-500 mb-4">Track your income</p>
              <Badge className="bg-green-100 text-green-700">$4,280 MTD</Badge>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
