'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { PageHeader } from '@/components/common/PageHeader';
import { StatCard } from '@/components/common/StatCard';
import { PrestasiCard } from '@/components/mahasiswa/PrestasiCard';
import { EmptyState } from '@/components/common/EmptyState';
import { getCurrentUserSync } from '@/lib/api/auth';
import { TSessionUser } from '@/types/auth';
import axios from 'axios';
import { TPrestasi } from '@/types/domain';
import { Award, CheckSquare, Clock, XCircle, Plus, FileText, ArrowRight } from 'lucide-react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

export default function MahasiswaDashboard() {
  const router = useRouter();
  const [user, setUser] = useState<TSessionUser | null>(null);
  const [list, setList] = useState<TPrestasi[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const session = getCurrentUserSync();
    if (session) {
      setUser(session);
      loadPrestasi(session.id);
    }
  }, []);

  async function loadPrestasi(mahasiswaId: string) {
    setIsLoading(true);
    try {
      const res = await axios.get('/api/prestasi');
      if (res.data.success && res.data.data) {
        const filtered = res.data.data.filter((item: any) => item.mahasiswa_id === mahasiswaId);
        const mapped = filtered.map((item: any) => {
          let status = item.status;
          return {
            id: item.id,
            mahasiswaId: item.mahasiswa_id,
            jenisKegiatan: item.jenis_kegiatan,
            namaKegiatan: item.nama_kegiatan,
            penyelenggara: item.penyelenggara,
            tingkat: item.tingkat,
            capaian: item.capaian,
            tanggalKegiatan: item.tanggal_kegiatan,
            dokumenPath: item.dokumen_path,
            dokumenName: item.dokumen_name,
            status: status,
            alasanPenolakan: item.alasan_penolakan,
            createdAt: item.created_at,
          };
        });
        setList(mapped);
      }
    } catch (e) {
      console.error(e);
    } finally {
      setIsLoading(false);
    }
  }

  if (!user) {
    return (
      <div className="flex items-center justify-center min-h-[50vh]">
        <span className="text-sm text-text-muted font-bold">Memuat data pengguna...</span>
      </div>
    );
  }

  // Calculate statistics
  const total = list.length;
  const verified = list.filter((p) => p.status === 'terverifikasi').length;
  const pending = list.filter((p) => p.status === 'menunggu_verifikasi').length;
  const rejected = list.filter((p) => p.status === 'ditolak').length;

  const recentList = list.slice(0, 3);

  // Generate monthly graph data based on achievements
  const studentChartData = [
    { month: 'Jan', count: 0 },
    { month: 'Feb', count: 1 },
    { month: 'Mar', count: verified },
    { month: 'Apr', count: verified + pending },
    { month: 'Mei', count: total },
    { month: 'Jun', count: total },
  ];

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <PageHeader
        title={`Selamat Datang, ${user.name}`}
        description={`Operator PT: ${user.perguruanTinggiName} | NIM: ${user.nimOrNidn || '-'}`}
        action={
          <Link
            href="/dashboard/mahasiswa/prestasi/tambah"
            className="inline-flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-xl text-sm font-semibold shadow-md shadow-primary/20 hover:shadow-lg transition-all"
          >
            <Plus className="h-4.5 w-4.5" />
            Tambah Prestasi
          </Link>
        }
      />

      {/* Stats Cards Row */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <StatCard
          title="Total Prestasi"
          value={total}
          description="Seluruh prestasi diajukan"
          icon={Award}
        />
        <StatCard
          title="Terverifikasi"
          value={verified}
          description="Prestasi valid & diakui"
          icon={CheckSquare}
          className="hover:border-success/20"
        />
        <StatCard
          title="Menunggu"
          value={pending}
          description="Sedang direview operator"
          icon={Clock}
          className="hover:border-warning/20"
        />
        <StatCard
          title="Ditolak"
          value={rejected}
          description="Membutuhkan revisi berkas"
          icon={XCircle}
          className="hover:border-danger/20"
        />
      </div>

      {/* Keaktifan Reporting Chart */}
      <div className="bg-white border border-slate-100 rounded-3xl p-6 shadow-[0_10px_30px_rgba(0,0,0,0.02)] space-y-4">
        <div className="flex items-center justify-between pb-2 border-b border-slate-100">
          <div className="flex items-center gap-2 text-slate-800">
            <Award className="h-5 w-5 text-[#f06424]" />
            <h4 className="font-extrabold text-slate-800">Tren Capaian Prestasi Anda</h4>
          </div>
          <span className="text-[10px] bg-indigo-500/10 text-indigo-600 px-2.5 py-1 rounded-full font-bold uppercase tracking-wider">
            Akademik / Non-Akademik
          </span>
        </div>

        <div className="h-48 w-full pt-4">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={studentChartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
              <defs>
                <linearGradient id="colorStudent" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#6366F1" stopOpacity={0.2} />
                  <stop offset="95%" stopColor="#6366F1" stopOpacity={0.0} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
              <XAxis dataKey="month" tickLine={false} axisLine={false} tick={{ fill: '#94a3b8', fontSize: 10, fontWeight: 600 }} />
              <YAxis tickLine={false} axisLine={false} tick={{ fill: '#94a3b8', fontSize: 10, fontWeight: 600 }} />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#ffffff',
                  borderRadius: '12px',
                  border: '1px solid #e2e8f0',
                  boxShadow: '0 4px 20px rgb(0,0,0,0.02)'
                }}
                itemStyle={{ fontWeight: 'bold' }}
              />
              <Area type="monotone" name="Jumlah Prestasi" dataKey="count" stroke="#6366F1" strokeWidth={2.5} fillOpacity={1} fill="url(#colorStudent)" />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Main Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">

        {/* Left: Recent achievements list */}
        <div className="lg:col-span-8 space-y-4">
          <div className="flex items-center justify-between">
            <h3 className="text-lg font-bold text-text-primary">
              Prestasi Terbaru Anda
            </h3>
            {total > 3 && (
              <Link
                href="/dashboard/mahasiswa/prestasi"
                className="inline-flex items-center gap-1 text-xs font-bold text-primary hover:underline"
              >
                Semua Prestasi
                <ArrowRight className="h-3.5 w-3.5" />
              </Link>
            )}
          </div>

          {isLoading ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              {[1, 2].map((i) => (
                <div key={i} className="h-40 bg-card border border-text-muted/10 rounded-2xl animate-pulse" />
              ))}
            </div>
          ) : recentList.length > 0 ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              {recentList.map((prestasi) => (
                <PrestasiCard key={prestasi.id} prestasi={prestasi} />
              ))}
            </div>
          ) : (
            <EmptyState
              title="Belum Ada Prestasi"
              description="Anda belum mengunggah prestasi apa pun. Mulai laporkan prestasi Anda sekarang!"
              actionLabel="Tambah Prestasi"
              onAction={() => router.push('/dashboard/mahasiswa/prestasi/tambah')}
            />
          )}
        </div>

        {/* Right: Quick guidelines card */}
        <div className="lg:col-span-4 bg-card border border-text-muted/10 rounded-3xl p-6 space-y-4 shadow-sm">
          <div className="flex items-center gap-2.5 text-primary border-b border-text-muted/5 pb-3">
            <FileText className="h-5 w-5" />
            <h4 className="font-bold text-text-primary">Panduan Pelaporan</h4>
          </div>

          <ul className="space-y-3 text-xs text-text-muted font-medium leading-relaxed">
            <li className="flex gap-2">
              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary font-bold text-[10px] flex-shrink-0">1</span>
              <span>Pastikan file bukti sertifikat berformat PDF/PNG/JPG dengan kapasitas maksimal 2MB.</span>
            </li>
            <li className="flex gap-2">
              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary font-bold text-[10px] flex-shrink-0">2</span>
              <span>Input nama kegiatan, penyelenggara, dan capaian dengan benar sesuai sertifikat asli.</span>
            </li>
            <li className="flex gap-2">
              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary font-bold text-[10px] flex-shrink-0">3</span>
              <span>Periksa notifikasi penolakan. Jika status ditolak, segera lakukan edit revisi berkas.</span>
            </li>
          </ul>
        </div>

      </div>
    </div>
  );
}