'use client';

import { motion } from 'framer-motion';
import { TrendingUp, Award, BookOpen } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { ProgressCard } from '@/components/cards/progress-card';
import { StatisticCard } from '@/components/cards/statistic-card';
import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
  LineChart, Line, PieChart, Pie, Cell,
} from 'recharts';

const weeklyData = [
  { day: 'Sen', submissions: 3, approved: 2 },
  { day: 'Sel', submissions: 5, approved: 4 },
  { day: 'Rab', submissions: 2, approved: 2 },
  { day: 'Kam', submissions: 4, approved: 3 },
  { day: 'Jum', submissions: 6, approved: 5 },
  { day: 'Sab', submissions: 3, approved: 3 },
  { day: 'Min', submissions: 1, approved: 1 },
];

const monthlyData = [
  { month: 'Jan', completed: 15 },
  { month: 'Feb', completed: 22 },
  { month: 'Mar', completed: 18 },
  { month: 'Apr', completed: 30 },
  { month: 'Mei', completed: 25 },
  { month: 'Jun', completed: 35 },
];

const chapterProgress = [
  { name: 'Muqaddimah', value: 95, total: 20 },
  { name: 'Al-Kalām', value: 70, total: 30 },
  { name: "Al-Mu'rab", value: 40, total: 25 },
  { name: 'An-Nakirah', value: 15, total: 35 },
];

const CHART_COLORS = ['#0D9488', '#10B981', '#D4AF37', '#F59E0B'];

const stagger = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { staggerChildren: 0.08 } },
};
const item = { hidden: { opacity: 0, y: 10 }, show: { opacity: 1, y: 0 } };

export default function ProgressPage() {
  return (
    <>
      <title>Progres | Nadhom Smart</title>
      <motion.div variants={stagger} initial="hidden" animate="show" className="space-y-6">
        {/* Summary Cards */}
        <motion.div variants={item} className="grid grid-cols-2 gap-3">
          <StatisticCard title="Total Selesai" value={145} icon={BookOpen} color="success" />
          <StatisticCard title="Skor Rata-rata" value="87" icon={TrendingUp} color="primary" />
        </motion.div>

        {/* Progress Ring */}
        <motion.div variants={item} className="grid grid-cols-2 gap-3">
          <ProgressCard title="Hafalan" current={145} total={1002} size="sm" />
          <ProgressCard title="Level 3" current={45} total={50} subtitle="ke level berikutnya" size="sm" color="var(--secondary)" />
        </motion.div>

        {/* Weekly Activity Chart */}
        <motion.div variants={item}>
          <Card className="border-border/50">
            <CardContent className="pt-5 pb-2 px-4">
              <h3 className="font-heading text-sm font-semibold mb-4">Aktivitas Mingguan</h3>
              <div className="h-48">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={weeklyData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
                    <XAxis dataKey="day" fontSize={11} tickLine={false} axisLine={false} />
                    <YAxis fontSize={11} tickLine={false} axisLine={false} />
                    <Tooltip
                      contentStyle={{
                        background: 'var(--card)',
                        border: '1px solid var(--border)',
                        borderRadius: '12px',
                        fontSize: '12px',
                      }}
                    />
                    <Bar dataKey="submissions" fill="var(--primary)" radius={[6, 6, 0, 0]} name="Setoran" />
                    <Bar dataKey="approved" fill="var(--success)" radius={[6, 6, 0, 0]} name="Disetujui" />
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>
        </motion.div>

        {/* Monthly Progress */}
        <motion.div variants={item}>
          <Card className="border-border/50">
            <CardContent className="pt-5 pb-2 px-4">
              <h3 className="font-heading text-sm font-semibold mb-4">Progres Bulanan</h3>
              <div className="h-48">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={monthlyData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
                    <XAxis dataKey="month" fontSize={11} tickLine={false} axisLine={false} />
                    <YAxis fontSize={11} tickLine={false} axisLine={false} />
                    <Tooltip
                      contentStyle={{
                        background: 'var(--card)',
                        border: '1px solid var(--border)',
                        borderRadius: '12px',
                        fontSize: '12px',
                      }}
                    />
                    <Line
                      type="monotone"
                      dataKey="completed"
                      stroke="var(--primary)"
                      strokeWidth={2.5}
                      dot={{ r: 4, fill: 'var(--primary)' }}
                      name="Selesai"
                    />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>
        </motion.div>

        {/* Chapter Progress */}
        <motion.div variants={item}>
          <Card className="border-border/50">
            <CardContent className="py-5 px-4">
              <h3 className="font-heading text-sm font-semibold mb-4">Progres per Bab</h3>
              <div className="space-y-3">
                {chapterProgress.map((ch, i) => (
                  <div key={ch.name}>
                    <div className="flex justify-between text-xs mb-1">
                      <span className="font-medium">{ch.name}</span>
                      <span className="text-muted-foreground">{ch.value}%</span>
                    </div>
                    <div className="h-2 rounded-full bg-muted overflow-hidden">
                      <motion.div
                        initial={{ width: 0 }}
                        animate={{ width: `${ch.value}%` }}
                        transition={{ duration: 0.8, delay: i * 0.1 }}
                        className="h-full rounded-full"
                        style={{ backgroundColor: CHART_COLORS[i % CHART_COLORS.length] }}
                      />
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </motion.div>

        {/* Achievements */}
        <motion.div variants={item}>
          <h3 className="font-heading text-sm font-semibold mb-3 flex items-center gap-2">
            <Award className="h-4 w-4 text-secondary" />
            Pencapaian
          </h3>
          <div className="grid grid-cols-2 gap-3">
            {[
              { icon: '🌱', name: 'Pemula', desc: '10 nadhom', earned: true },
              { icon: '🔥', name: 'Rajin', desc: '7 hari streak', earned: true },
              { icon: '⭐', name: 'Hafidz Muda', desc: '100 nadhom', earned: true },
              { icon: '👑', name: 'Master', desc: '500 nadhom', earned: false },
              { icon: '💎', name: 'Sempurna', desc: 'Skor 100', earned: false },
              { icon: '🏆', name: 'Juara', desc: 'Peringkat 1', earned: false },
            ].map((a) => (
              <Card key={a.name} className={`border-border/50 ${!a.earned && 'opacity-40'}`}>
                <CardContent className="flex items-center gap-3 p-3">
                  <span className="text-2xl">{a.icon}</span>
                  <div>
                    <p className="text-xs font-semibold">{a.name}</p>
                    <p className="text-[10px] text-muted-foreground">{a.desc}</p>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </motion.div>
      </motion.div>
    </>
  );
}