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

export default function VendorPerformance() {
  const performanceData = [
    { month: 'Jan', fillRate: 94, satisfaction: 4.6, onTime: 96 },
    { month: 'Feb', fillRate: 96, satisfaction: 4.7, onTime: 97 },
    { month: 'Mar', fillRate: 95, satisfaction: 4.8, onTime: 98 },
    { month: 'Apr', fillRate: 97, satisfaction: 4.7, onTime: 96 },
    { month: 'May', fillRate: 98, satisfaction: 4.9, onTime: 99 },
  ];

  const metrics = [
    { label: "Fill Rate", value: "97%", icon: Target, color: "text-green-600", bg: "bg-green-100" },
    { label: "Client Satisfaction", value: "4.8/5", icon: Star, color: "text-amber-600", bg: "bg-amber-100" },
    { label: "On-Time Delivery", value: "98%", icon: Calendar, color: "text-blue-600", bg: "bg-blue-100" },
    { label: "Active Staff", value: "156", icon: Users, color: "text-purple-600", bg: "bg-purple-100" },
  ];

  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]">Performance Metrics</h1>
          <p className="text-slate-500 mt-1">Track your vendor performance and ratings</p>
        </div>

        {/* KROW Score */}
        <Card className="mb-8 border-2 border-[#0A39DF] bg-gradient-to-br from-blue-50 to-white">
          <CardContent className="p-8 text-center">
            <Award className="w-16 h-16 mx-auto text-[#0A39DF] mb-4" />
            <h2 className="text-4xl font-bold text-[#1C323E] mb-2">KROW Score: A+</h2>
            <p className="text-slate-600 mb-4">You're in the top 10% of vendors!</p>
            <Badge className="bg-green-100 text-green-700 text-lg px-4 py-2">
              <TrendingUp className="w-4 h-4 mr-2" />
              +5% from last month
            </Badge>
          </CardContent>
        </Card>

        {/* Key Metrics */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          {metrics.map((metric, index) => (
            <Card key={index} className="border-slate-200">
              <CardContent className="p-6">
                <div className={`w-12 h-12 ${metric.bg} rounded-lg flex items-center justify-center mb-3`}>
                  <metric.icon className={`w-6 h-6 ${metric.color}`} />
                </div>
                <p className="text-sm text-slate-500">{metric.label}</p>
                <p className={`text-3xl font-bold ${metric.color}`}>{metric.value}</p>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Performance Trends */}
        <Card className="mb-8 border-slate-200">
          <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b">
            <CardTitle>Performance Trends</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={performanceData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="month" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="fillRate" stroke="#0A39DF" strokeWidth={3} name="Fill Rate %" />
                <Line type="monotone" dataKey="onTime" stroke="#10b981" strokeWidth={3} name="On-Time %" />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* Client Feedback */}
        <Card className="border-slate-200">
          <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b">
            <CardTitle>Recent Client Feedback</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="space-y-4">
              {[
                { client: "Tech Corp", rating: 5, comment: "Exceptional service and professional staff", date: "2 days ago" },
                { client: "Premier Events", rating: 4, comment: "Very reliable, minor delay on one shift", date: "1 week ago" },
                { client: "Corporate Solutions", rating: 5, comment: "Best vendor we've worked with!", date: "2 weeks ago" },
              ].map((feedback, index) => (
                <div key={index} className="p-4 bg-slate-50 rounded-lg border border-slate-200">
                  <div className="flex items-start justify-between mb-2">
                    <div>
                      <h4 className="font-semibold text-[#1C323E]">{feedback.client}</h4>
                      <div className="flex items-center gap-1 mt-1">
                        {[...Array(5)].map((_, i) => (
                          <Star key={i} className={`w-4 h-4 ${i < feedback.rating ? 'text-amber-400 fill-amber-400' : 'text-slate-300'}`} />
                        ))}
                      </div>
                    </div>
                    <span className="text-xs text-slate-500">{feedback.date}</span>
                  </div>
                  <p className="text-sm text-slate-600">{feedback.comment}</p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}