import React, { useState, useEffect, useRef } from 'react';
import {
  ArrowLeft, User, Shield, Clock, BookOpen, Calculator, Award,
  TrendingUp, CheckCircle2, Circle, Lock, Eye, EyeOff, AlertCircle,
  Check, Sparkles,
} from 'lucide-react';
import { useAuth, UserRecord } from './auth/AuthContext';
import { useProgress } from './progress/ProgressContext';
import { useGoldCoins } from './practice/GoldCoinContext';
import { LESSONS, EBRW_LESSONS } from '../constants';
import Mascot from './Mascot';

// Animated count-up
function useCountUp(target: number, duration = 900) {
  const [count, setCount] = useState(0);
  const started = useRef(false);
  useEffect(() => {
    if (started.current) return;
    started.current = true;
    const startTime = performance.now();
    const animate = (now: number) => {
      const progress = Math.min((now - startTime) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 2.5);
      setCount(Math.round(eased * target));
      if (progress < 1) requestAnimationFrame(animate);
    };
    requestAnimationFrame(animate);
  }, [target, duration]);
  return count;
}

interface UserDashboardProps {
  onExit: () => void;
}

export default function UserDashboard({ onExit }: UserDashboardProps) {
  const { username, role, getUserRecord, changePassword, updateDisplayName } = useAuth();
  const { getSubjectStats, getLessonStatus } = useProgress();
  const { totalCoins, state: coinState } = useGoldCoins();

  const user = getUserRecord(username || '');
  const mathStats = getSubjectStats('math');
  const ebrwStats = getSubjectStats('ebrw');

  // Account settings
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [showCurrentPw, setShowCurrentPw] = useState(false);
  const [showNewPw, setShowNewPw] = useState(false);
  const [pwMsg, setPwMsg] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
  const [pwLoading, setPwLoading] = useState(false);

  const [editName, setEditName] = useState(false);
  const [nameInput, setNameInput] = useState(user?.displayName || '');
  const [nameSaved, setNameSaved] = useState(false);

  const animCoins = useCountUp(totalCoins, 1200);

  // Count completed topics across all practice
  const topicsAttempted = Object.keys(coinState.topicProgress).length;

  // Calculate total accuracy
  let totalAttempted = 0;
  let totalCorrect = 0;
  Object.values(coinState.topicProgress).forEach((tp: any) => {
    (['easy', 'medium', 'hard'] as const).forEach(d => {
      totalAttempted += tp[d]?.attempted || 0;
      totalCorrect += tp[d]?.correct || 0;
    });
  });
  const accuracy = totalAttempted > 0 ? Math.round((totalCorrect / totalAttempted) * 100) : 0;

  const handleChangePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    setPwMsg(null);
    if (newPassword !== confirmPassword) {
      setPwMsg({ type: 'error', text: 'New passwords do not match.' });
      return;
    }
    setPwLoading(true);
    const result = await changePassword(username || '', currentPassword, newPassword);
    setPwLoading(false);
    if (result.success) {
      setPwMsg({ type: 'success', text: 'Password changed successfully!' });
      setCurrentPassword('');
      setNewPassword('');
      setConfirmPassword('');
    } else {
      setPwMsg({ type: 'error', text: result.error || 'Failed to change password.' });
    }
  };

  const handleSaveName = () => {
    if (username && nameInput.trim()) {
      updateDisplayName(username, nameInput.trim());
      setEditName(false);
      setNameSaved(true);
      setTimeout(() => setNameSaved(false), 2000);
    }
  };

  // Progress ring
  function ProgressRing({ percent, size = 72, stroke = 6, color }: { percent: number; size?: number; stroke?: number; color: string }) {
    const r = (size - stroke) / 2;
    const circ = 2 * Math.PI * r;
    const offset = circ - (percent / 100) * circ;
    return (
      <svg width={size} height={size} className="transform -rotate-90">
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="currentColor" strokeWidth={stroke} className="text-slate-100" />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth={stroke}
          strokeDasharray={circ} strokeDashoffset={offset} strokeLinecap="round"
          className="transition-all duration-1000 ease-out" />
        <text x={size / 2} y={size / 2} textAnchor="middle" dominantBaseline="central"
          className="text-sm font-bold fill-slate-800 transform rotate-90" style={{ transformOrigin: 'center' }}>
          {percent}%
        </text>
      </svg>
    );
  }

  function StatusIcon({ status }: { status: string }) {
    if (status === 'completed') return <CheckCircle2 className="w-4 h-4 text-emerald-500" />;
    if (status === 'in_progress') return <Circle className="w-4 h-4 text-blue-400" />;
    return <Lock className="w-3.5 h-3.5 text-slate-300" />;
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-white via-slate-50/50 to-white">

      {/* Header */}
      <header className="sticky top-0 z-40 glass-nav border-b border-slate-100">
        <div className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
          <button onClick={onExit} className="flex items-center gap-2 text-sm font-semibold text-slate-500 hover:text-slate-900 transition-colors">
            <ArrowLeft className="w-4 h-4" /> Back to Home
          </button>
          <h1 className="text-sm font-bold text-slate-800">My Dashboard</h1>
          <div className="w-20" />
        </div>
      </header>

      <div className="max-w-5xl mx-auto px-6 py-10 space-y-10">

        {/* ── Welcome Hero ── */}
        <div className="relative bg-gradient-to-br from-cyan-50 via-white to-blue-50 rounded-2xl p-8 border border-cyan-100 overflow-hidden anim-fade-in-up">
          <div className="absolute -top-2 -right-2 pointer-events-none select-none opacity-80">
            <Mascot pose="waving" height={120} />
          </div>
          <div className="relative">
            <div className="flex items-center gap-3 mb-3">
              <div className="w-12 h-12 rounded-xl bg-cyan-100 flex items-center justify-center">
                <User className="w-6 h-6 text-cyan-600" />
              </div>
              <div>
                <div className="flex items-center gap-2">
                  {editName ? (
                    <div className="flex items-center gap-2">
                      <input value={nameInput} onChange={e => setNameInput(e.target.value)}
                        className="text-xl font-bold text-slate-900 bg-white border border-slate-200 rounded-lg px-2 py-0.5 focus:outline-none focus:ring-2 focus:ring-cyan-400 w-48"
                        autoFocus onKeyDown={e => e.key === 'Enter' && handleSaveName()} />
                      <button onClick={handleSaveName} className="text-xs font-bold text-cyan-600 hover:text-cyan-800">Save</button>
                      <button onClick={() => setEditName(false)} className="text-xs text-slate-400 hover:text-slate-600">Cancel</button>
                    </div>
                  ) : (
                    <>
                      <h2 className="text-xl font-bold text-slate-900">{user?.displayName || username}</h2>
                      <button onClick={() => { setNameInput(user?.displayName || ''); setEditName(true); }}
                        className="text-xs text-cyan-500 hover:text-cyan-700 font-medium">edit</button>
                      {nameSaved && <span className="text-xs text-emerald-500 font-medium flex items-center gap-1"><Check className="w-3 h-3" /> Saved</span>}
                    </>
                  )}
                </div>
                <div className="flex items-center gap-2 mt-0.5">
                  <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-widest ${
                    role === 'admin' ? 'bg-amber-100 text-amber-700' : 'bg-cyan-100 text-cyan-700'
                  }`}>
                    {role === 'admin' && <Shield className="w-3 h-3" />}
                    {role}
                  </span>
                  <span className="text-xs text-slate-400">@{username}</span>
                </div>
              </div>
            </div>
            {user?.lastLoginAt && (
              <p className="text-xs text-slate-400 mt-2 flex items-center gap-1">
                <Clock className="w-3 h-3" />
                Last login: {new Date(user.lastLoginAt).toLocaleString()}
                {user.lastLoginIp && user.lastLoginIp !== 'unknown' && <span className="ml-1">from {user.lastLoginIp}</span>}
              </p>
            )}
          </div>
        </div>

        {/* ── Stats Overview ── */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 anim-fade-in-up stagger-1">
          <div className="bg-white rounded-2xl p-5 border border-slate-200 card-lift text-center">
            <p className="text-3xl font-bold text-slate-900 tabular-nums">{mathStats.completed + ebrwStats.completed}</p>
            <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400 mt-1">Lessons Done</p>
          </div>
          <div className="bg-white rounded-2xl p-5 border border-slate-200 card-lift text-center">
            <p className="text-3xl font-bold text-amber-500 tabular-nums flex items-center justify-center gap-1">
              <Award className="w-5 h-5" />{animCoins}
            </p>
            <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400 mt-1">Gold Coins</p>
          </div>
          <div className="bg-white rounded-2xl p-5 border border-slate-200 card-lift text-center">
            <p className="text-3xl font-bold text-emerald-500 tabular-nums">{accuracy}%</p>
            <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400 mt-1">Accuracy</p>
          </div>
          <div className="bg-white rounded-2xl p-5 border border-slate-200 card-lift text-center">
            <p className="text-3xl font-bold text-blue-500 tabular-nums">{topicsAttempted}</p>
            <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400 mt-1">Topics Practiced</p>
          </div>
        </div>

        {/* ── Lesson Progress ── */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 anim-fade-in-up stagger-2">

          {/* Math */}
          <div className="bg-white rounded-2xl p-6 border border-slate-200 card-lift">
            <div className="flex items-center justify-between mb-5">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center">
                  <Calculator className="w-5 h-5 text-blue-500" />
                </div>
                <div>
                  <h3 className="font-bold text-slate-900">Mathematics</h3>
                  <p className="text-xs text-slate-400">{mathStats.completed}/{mathStats.total} lessons completed</p>
                </div>
              </div>
              <ProgressRing percent={mathStats.percentComplete} color="#3b82f6" />
            </div>
            <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden mb-4">
              <div className="h-full bg-blue-500 rounded-full transition-all duration-1000" style={{ width: `${mathStats.percentComplete}%` }} />
            </div>
            <div className="space-y-1 max-h-48 overflow-y-auto pr-1">
              {LESSONS.map(l => (
                <div key={l.id} className="flex items-center gap-2 py-1 text-xs">
                  <StatusIcon status={getLessonStatus(l.id, 'math')} />
                  <span className="text-slate-600 truncate">{l.title}</span>
                </div>
              ))}
            </div>
          </div>

          {/* EBRW */}
          <div className="bg-white rounded-2xl p-6 border border-slate-200 card-lift">
            <div className="flex items-center justify-between mb-5">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-purple-50 flex items-center justify-center">
                  <BookOpen className="w-5 h-5 text-purple-500" />
                </div>
                <div>
                  <h3 className="font-bold text-slate-900">Reading & Writing</h3>
                  <p className="text-xs text-slate-400">{ebrwStats.completed}/{ebrwStats.total} lessons completed</p>
                </div>
              </div>
              <ProgressRing percent={ebrwStats.percentComplete} color="#a855f7" />
            </div>
            <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden mb-4">
              <div className="h-full bg-purple-500 rounded-full transition-all duration-1000" style={{ width: `${ebrwStats.percentComplete}%` }} />
            </div>
            <div className="space-y-1 max-h-48 overflow-y-auto pr-1">
              {EBRW_LESSONS.map(l => (
                <div key={l.id} className="flex items-center gap-2 py-1 text-xs">
                  <StatusIcon status={getLessonStatus(l.id, 'ebrw')} />
                  <span className="text-slate-600 truncate">{l.title}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* ── Practice Performance ── */}
        <div className="bg-white rounded-2xl p-6 border border-slate-200 anim-fade-in-up stagger-3">
          <div className="flex items-center gap-3 mb-5">
            <div className="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center">
              <TrendingUp className="w-5 h-5 text-amber-500" />
            </div>
            <div>
              <h3 className="font-bold text-slate-900">Practice Performance</h3>
              <p className="text-xs text-slate-400">{totalAttempted} questions attempted across {topicsAttempted} topics</p>
            </div>
          </div>

          {topicsAttempted === 0 ? (
            <div className="py-8 text-center text-slate-400 text-sm">
              <Sparkles className="w-6 h-6 mx-auto mb-2 text-amber-300" />
              No practice sessions yet. Start practicing to see your performance!
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
              {Object.entries(coinState.topicProgress).map(([topicId, tp]: [string, any]) => {
                const easy = tp.easy || { attempted: 0, correct: 0 };
                const medium = tp.medium || { attempted: 0, correct: 0 };
                const hard = tp.hard || { attempted: 0, correct: 0 };
                const total = easy.attempted + medium.attempted + hard.attempted;
                const correct = easy.correct + medium.correct + hard.correct;
                const acc = total > 0 ? Math.round((correct / total) * 100) : 0;
                return (
                  <div key={topicId} className="border border-slate-100 rounded-xl p-3 hover:border-slate-200 transition-colors">
                    <p className="text-xs font-semibold text-slate-700 truncate mb-2">{topicId}</p>
                    <div className="flex items-center justify-between text-[10px] text-slate-400 mb-1">
                      <span>{correct}/{total} correct</span>
                      <span className={`font-bold ${acc >= 70 ? 'text-emerald-500' : acc >= 40 ? 'text-amber-500' : 'text-rose-500'}`}>{acc}%</span>
                    </div>
                    <div className="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
                      <div className={`h-full rounded-full ${acc >= 70 ? 'bg-emerald-400' : acc >= 40 ? 'bg-amber-400' : 'bg-rose-400'}`} style={{ width: `${acc}%` }} />
                    </div>
                    <div className="flex gap-3 mt-2 text-[10px] text-slate-400">
                      <span>E: {easy.correct}/{easy.attempted}</span>
                      <span>M: {medium.correct}/{medium.attempted}</span>
                      <span>H: {hard.correct}/{hard.attempted}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* ── Account Settings ── */}
        <div className="bg-white rounded-2xl p-6 border border-slate-200 anim-fade-in-up stagger-4">
          <div className="flex items-center gap-3 mb-5">
            <div className="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center">
              <Lock className="w-5 h-5 text-slate-500" />
            </div>
            <div>
              <h3 className="font-bold text-slate-900">Change Password</h3>
              <p className="text-xs text-slate-400">Update your account password</p>
            </div>
          </div>

          <form onSubmit={handleChangePassword} className="max-w-sm space-y-3">
            {pwMsg && (
              <div className={`flex items-center gap-2 p-3 rounded-xl text-sm ${
                pwMsg.type === 'success' ? 'bg-emerald-50 border border-emerald-200 text-emerald-700' : 'bg-rose-50 border border-rose-200 text-rose-700'
              }`}>
                {pwMsg.type === 'success' ? <Check className="w-4 h-4 shrink-0" /> : <AlertCircle className="w-4 h-4 shrink-0" />}
                {pwMsg.text}
              </div>
            )}

            <div className="relative">
              <label className="block text-xs font-semibold text-slate-600 mb-1">Current Password</label>
              <input type={showCurrentPw ? 'text' : 'password'} value={currentPassword} onChange={e => setCurrentPassword(e.target.value)}
                className="w-full px-3 py-2 pr-9 text-sm border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-cyan-400" required />
              <button type="button" onClick={() => setShowCurrentPw(!showCurrentPw)} className="absolute right-3 top-7 text-slate-400 hover:text-slate-600">
                {showCurrentPw ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
              </button>
            </div>

            <div className="relative">
              <label className="block text-xs font-semibold text-slate-600 mb-1">New Password</label>
              <input type={showNewPw ? 'text' : 'password'} value={newPassword} onChange={e => setNewPassword(e.target.value)}
                className="w-full px-3 py-2 pr-9 text-sm border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-cyan-400" required minLength={4} />
              <button type="button" onClick={() => setShowNewPw(!showNewPw)} className="absolute right-3 top-7 text-slate-400 hover:text-slate-600">
                {showNewPw ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
              </button>
            </div>

            <div>
              <label className="block text-xs font-semibold text-slate-600 mb-1">Confirm New Password</label>
              <input type="password" value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)}
                className="w-full px-3 py-2 text-sm border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-cyan-400" required minLength={4} />
            </div>

            <button type="submit" disabled={pwLoading}
              className="px-5 py-2 bg-slate-900 text-white text-sm font-bold rounded-xl hover:bg-slate-700 transition-all btn-primary disabled:opacity-50">
              {pwLoading ? 'Changing...' : 'Change Password'}
            </button>
          </form>
        </div>

      </div>
    </div>
  );
}