'use client';

import React from 'react';
import { Building2, Award, Users, CheckCircle, PieChart as PieIcon, AreaChart as AreaIcon } from 'lucide-react';
import {
  PieChart, Pie, Cell, ResponsiveContainer, Tooltip,
  AreaChart, Area, XAxis, YAxis, CartesianGrid
} from 'recharts';

interface StatUniversitasProps {
  stats: {
    internasional: number;
    nasional: number;
    wilayah: number;
    total: number;
  };
  trendData: {
    month: string;
    mandiri: number;
    belmawa: number;
  }[];
}

export function StatUniversitas({ stats, trendData }: StatUniversitasProps) {
  const data = [
    { name: 'Tingkat Internasional', value: stats.internasional, color: '#3B82F6' },
    { name: 'Tingkat Nasional', value: stats.nasional, color: '#F97316' },
    { name: 'Tingkat Wilayah', value: stats.wilayah, color: '#10B981' },
  ];

  return (
    <div className="space-y-6">
      {/* Charts Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">

        {/* Monthly Trend AreaChart */}
        <div className="lg:col-span-8 bg-white border border-slate-100 rounded-2xl p-7 shadow-[0_8px_30px_rgb(0,0,0,0.04)] flex flex-col justify-between h-auto lg:h-[455px]">
          <div className="flex items-center justify-between pb-2 border-b border-slate-100/60">
            <div className="flex items-center gap-2 text-slate-800">
              <AreaIcon className="h-5 w-5 text-[#f06424]" />
              <h3 className="text-base font-extrabold text-slate-800">Grafik Pengajuan Prestasi</h3>
            </div>
            <span className="text-[10px] bg-emerald-500/10 text-emerald-600 px-2.5 py-1 rounded-full font-bold uppercase tracking-wider">
              Semester Ini
            </span>
          </div>

          <div className="h-80 w-full pt-4">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={trendData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
                <defs>
                  <linearGradient id="colorMandiri" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#3B82F6" stopOpacity={0.2} />
                    <stop offset="95%" stopColor="#3B82F6" stopOpacity={0.0} />
                  </linearGradient>
                  <linearGradient id="colorBelmawa" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#F97316" stopOpacity={0.2} />
                    <stop offset="95%" stopColor="#F97316" stopOpacity={0.0} />
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
                <XAxis
                  dataKey="month"
                  tickLine={false}
                  axisLine={false}
                  tick={{ fill: '#94a3b8', fontSize: 11, fontWeight: 600 }}
                />
                <YAxis
                  tickLine={false}
                  axisLine={false}
                  tick={{ fill: '#94a3b8', fontSize: 11, fontWeight: 600 }}
                />
                <Tooltip
                  contentStyle={{
                    backgroundColor: '#ffffff',
                    borderRadius: '16px',
                    border: '1px solid #f1f5f9',
                    boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05)'
                  }}
                  labelStyle={{ fontWeight: 'bold', color: '#1e293b', marginBottom: '4px' }}
                />
                <Area
                  type="monotone"
                  name="Prestasi Mandiri"
                  dataKey="mandiri"
                  stroke="#3B82F6"
                  strokeWidth={2.5}
                  fillOpacity={1}
                  fill="url(#colorMandiri)"
                />
                <Area
                  type="monotone"
                  name="Prestasi Belmawa"
                  dataKey="belmawa"
                  stroke="#F97316"
                  strokeWidth={2.5}
                  fillOpacity={1}
                  fill="url(#colorBelmawa)"
                />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </div>

        {/* Level Distribution */}
        <div className="lg:col-span-4 bg-white border border-slate-100 rounded-2xl p-7 shadow-[0_8px_30px_rgb(0,0,0,0.04)] flex flex-col justify-between h-auto lg:h-[455px]">
          <div className="flex items-center gap-2 text-slate-800 pb-2 border-b border-slate-100/60">
            <PieIcon className="h-5 w-5 text-[#f06424]" />
            <h3 className="text-base font-extrabold text-slate-800">Tingkat Prestasi</h3>
          </div>

          <div className="h-[210px] w-full relative flex items-center justify-center pt-2">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={data}
                  cx="50%"
                  cy="50%"
                  innerRadius={55}
                  outerRadius={75}
                  paddingAngle={4}
                  cornerRadius={4}
                  dataKey="value"
                >
                  {data.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip
                  contentStyle={{ backgroundColor: '#ffffff', borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 4px 20px rgb(0,0,0,0.05)' }}
                  itemStyle={{ fontWeight: 'bold' }}
                />
              </PieChart>
            </ResponsiveContainer>
            <div className="absolute flex flex-col items-center justify-center pointer-events-none">
              <span className="text-2xl font-extrabold text-slate-800">{stats.total}</span>
              <span className="text-[9px] uppercase font-bold text-slate-400 tracking-wider">Total Berkas</span>
            </div>
          </div>

          {/* Custom Legend */}
          <div className="space-y-2.5 pt-2">
            {data.map((item) => (
              <div key={item.name} className="flex items-center justify-between p-2.5 rounded-xl bg-slate-50/50 hover:bg-slate-50 transition-all duration-300 border border-slate-100/50 hover:border-slate-200/80">
                <div className="flex items-center gap-2">
                  <span className="w-2.5 h-2.5 rounded-full ring-4 ring-white shadow-sm flex-shrink-0" style={{ backgroundColor: item.color }} />
                  <span className="text-[11px] font-bold text-slate-600">{item.name}</span>
                </div>
                <span className="text-slate-800 font-extrabold text-xs">{item.value}</span>
              </div>
            ))}
          </div>
        </div>

      </div>
    </div>
  );
}