import React, { useState, useEffect, useMemo, useRef } from 'react';
import { 
  Cloud, 
  Settings, 
  Download, 
  Calculator, 
  FileText, 
  Upload, 
  Users, 
  Inbox, 
  TrendingUp, 
  Award, 
  Target, 
  Trash2, 
  CheckCircle, 
  AlertCircle,
  Loader2
} from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInAnonymously, 
  onAuthStateChanged,
  signInWithCustomToken
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  updateDoc, 
  deleteDoc, 
  doc, 
  onSnapshot, 
  query, 
  orderBy 
} from 'firebase/firestore';

// --- Firebase Configuration ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

// --- Helper Functions ---

const calculateGrade = (score) => {
  if (score >= 80) return 'A';
  if (score >= 70) return 'B';
  if (score >= 60) return 'C';
  if (score >= 50) return 'D';
  return 'F';
};

const getGradeColor = (grade) => {
  const colors = {
    'A': 'bg-green-100 text-green-800',
    'B': 'bg-blue-100 text-blue-800',
    'C': 'bg-yellow-100 text-yellow-800',
    'D': 'bg-orange-100 text-orange-800',
    'F': 'bg-red-100 text-red-800'
  };
  return colors[grade] || 'bg-gray-100 text-gray-800';
};

// --- Main Component ---

export default function DashboardPemarkahan() {
  // State
  const [user, setUser] = useState(null);
  const [students, setStudents] = useState([]);
  const [loading, setLoading] = useState(true);
  const [configOpen, setConfigOpen] = useState(false);
  const [importText, setImportText] = useState("AZIZAN BIN MURAD @ IBRAHIM\nEMYLIA BINTI AHMAD\nMOHD FARHAN BIN ABDULLAH");
  const [toasts, setToasts] = useState([]);

// Weights State
  const [weights, setWeights] = useState({
    caseStudy: 20,
    kuiz1: 10,
    kuiz2: 10,
    presentation: 20,
    final: 40
  });

// Derived State
  const totalWeight = Object.values(weights).reduce((a, b) => a + Number(b), 0);
  const weightWarning = Math.abs(totalWeight - 100) > 0.01;

// --- Auth & Data Fetching ---

useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (error) {
        console.error("Auth error:", error);
        showToast("Ralat sambungan authentication", "error");
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

useEffect(() => {
    if (!user) return;

// Use a specific sub-collection path for this app instance to avoid collisions
    const studentsRef = collection(db, 'artifacts', appId, 'public', 'data', 'students_v1');

// Simple query, sorting handled in client to avoid complex index requirements
    const unsubscribe = onSnapshot(studentsRef, 
      (snapshot) => {
        const fetchedStudents = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        // Sort by name alphabetically
        fetchedStudents.sort((a, b) => a.name.localeCompare(b.name));
        setStudents(fetchedStudents);
        setLoading(false);
      },
      (error) => {
        console.error("Firestore error:", error);
        showToast("Gagal membaca data", "error");
        setLoading(false);
      }
    );

return () => unsubscribe();
  }, [user]);

// --- Actions ---

const showToast = (message, type = 'success') => {
    const id = Date.now();
    setToasts(prev => [...prev, { id, message, type }]);
    setTimeout(() => {
      setToasts(prev => prev.filter(t => t.id !== id));
    }, 3000);
  };

const handleWeightChange = (field, value) => {
    setWeights(prev => ({
      ...prev,
      [field]: parseFloat(value) || 0
    }));
  };

const calculateTotal = (s) => {
    // Recalculate based on current weights in state, not just stored total
    const total = (
      ((s.caseStudy || 0) * weights.caseStudy / 100) +
      ((s.kuiz1 || 0) * weights.kuiz1 / 100) +
      ((s.kuiz2 || 0) * weights.kuiz2 / 100) +
      ((s.presentation || 0) * weights.presentation / 100) +
      ((s.final || 0) * weights.final / 100)
    );
    return Math.round(total * 100) / 100;
  };

const importStudents = async () => {
    if (!user) return;
    const names = importText.split('\n').filter(line => line.trim());

if (names.length === 0) {
      showToast("Sila masukkan senarai nama", "error");
      return;
    }

if (students.length + names.length > 200) {
      showToast("Had maksimum pelajar dicapai (200)", "error");
      return;
    }

setLoading(true);
    let successCount = 0;
    const studentsRef = collection(db, 'artifacts', appId, 'public', 'data', 'students_v1');

try {
      // Process sequentially to avoid rate limits on massive batch
      for (const name of names) {
        await addDoc(studentsRef, {
          name: name.trim(),
          caseStudy: 0,
          kuiz1: 0,
          kuiz2: 0,
          presentation: 0,
          final: 0,
          createdAt: new Date().toISOString()
        });
        successCount++;
      }
      showToast(`Berjaya import ${successCount} pelajar!`, "success");
      setImportText("");
    } catch (error) {
      console.error("Import error:", error);
      showToast("Ralat semasa import", "error");
    } finally {
      setLoading(false);
    }
  };

const updateMark = async (studentId, field, value) => {
    if (!user) return;

// Optimistic update handled by Firestore listener, but we need to ensure local feel is snappy
    // For now, we just write to DB.

const val = parseFloat(value);
    if (isNaN(val) || val < 0 || val > 100) return; // Simple validation

try {
      const studentRef = doc(db, 'artifacts', appId, 'public', 'data', 'students_v1', studentId);
      await updateDoc(studentRef, {
        [field]: val
      });
    } catch (error) {
      console.error("Update error:", error);
      showToast("Gagal mengemaskini markah", "error");
    }
  };

const deleteStudent = async (studentId) => {
    if (!confirm("Adakah anda pasti mahu memadam pelajar ini?")) return;
    try {
      await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'students_v1', studentId));
      showToast("Pelajar dipadam", "success");
    } catch (error) {
      showToast("Gagal memadam", "error");
    }
  };

const exportCSV = () => {
    if (students.length === 0) {
      showToast("Tiada data untuk diexport", "error");
      return;
    }

const headers = ['Nama', `Case Study (${weights.caseStudy}%)`, `Kuiz 1 (${weights.kuiz1}%)`, `Kuiz 2 (${weights.kuiz2}%)`, `Presentation (${weights.presentation}%)`, `Final (${weights.final}%)`, 'Jumlah', 'Gred'];
    const rows = students.map(s => {
      const total = calculateTotal(s);
      const grade = calculateGrade(total);
      return [
        `"${s.name}"`, // Quote name to handle commas
        s.caseStudy || 0,
        s.kuiz1 || 0,
        s.kuiz2 || 0,
        s.presentation || 0,
        s.final || 0,
        total.toFixed(2),
        grade
      ].join(',');
    });

const csvContent = "data:text/csv;charset=utf-8," + [headers.join(','), ...rows].join('\n');
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", `markah_pelajar_${new Date().toISOString().slice(0,10)}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    showToast("CSV berjaya dimuat turun", "success");
  };

// --- Statistics ---
  const stats = useMemo(() => {
    if (students.length === 0) return { avg: 0, high: 0, low: 0 };
    const scores = students.map(s => calculateTotal(s));
    const total = scores.reduce((a, b) => a + b, 0);
    return {
      avg: (total / students.length).toFixed(2),
      high: Math.max(...scores).toFixed(2),
      low: Math.min(...scores).toFixed(2)
    };
  }, [students, weights]);

// --- Render ---

return (
    <div className="min-h-screen bg-slate-50 font-sans text-gray-800 pb-20">
      <div className="w-full mx-auto space-y-6 p-4 max-w-7xl">

{/* Status Bar */}
        <div className="flex justify-between items-center bg-white px-4 py-2 rounded-lg shadow-sm border border-gray-200">
          <div className="flex items-center gap-2 text-sm text-gray-500">
            <Cloud className={`w-4 h-4 ${user ? 'text-green-500' : 'text-orange-500'}`} />
            <span>Status:</span>
            <span className="font-medium text-gray-900">
              {loading ? 'Memuatkan...' : (user ? 'Bersambung' : 'Menghubungkan...')}
            </span>
          </div>
          <div className="text-xs font-medium text-indigo-600">
            {students.length} pelajar
          </div>
        </div>

{/* Logos */}
        <div className="flex justify-center items-center gap-6 pb-2">
          <img 
            src="https://arleta.site/interactivelink/1037/logo-246x300.png" 
            alt="Logo MARA" 
            className="h-24 object-contain"
            onError={(e) => e.target.style.display='none'}
          />
          <img 
            src="https://arleta.site/interactivelink/1037/KL-01.png" 
            alt="Logo IKMKL" 
            className="h-28 object-contain"
            onError={(e) => e.target.style.display='none'}
          />
        </div>

{/* Header */}
        <div className="bg-white rounded-xl shadow-sm p-6 border-l-4 border-indigo-600 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Dashboard Pemarkahan</h1>
            <p className="text-gray-500 text-sm mt-1">
              <span className="font-medium">Subjek:</span> Strategic Management <span className="mx-2 text-gray-300">|</span> <span className="font-medium">Semester:</span> Semasa
            </p>
            <p className="text-gray-500 font-medium text-sm mt-1">
              <span>Nama Pensyarah:</span> En Muhammad Syukran bin Jamil
            </p>
          </div>
          <div className="flex gap-2">
            <button 
              onClick={() => setConfigOpen(!configOpen)}
              className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors text-sm font-medium"
            >
              <Settings className="w-4 h-4" /> Konfigurasi
            </button>
            <button 
              onClick={exportCSV}
              className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors text-sm font-medium shadow-sm"
            >
              <Download className="w-4 h-4" /> Export CSV
            </button>
          </div>
        </div>

{/* Config Panel */}
        {configOpen && (
          <div className="bg-white rounded-xl p-6 border border-indigo-200 shadow-sm animate-in fade-in slide-in-from-top-4 duration-300">
            <h3 className="font-semibold text-indigo-900 mb-4 flex items-center gap-2">
              <Calculator className="w-4 h-4" /> Tetapan Pemberat Markah (%)
            </h3>
            <p className="text-sm text-gray-500 mb-4">Markah dimasukkan dalam bentuk /100. Pemberat akan dikira automatik.</p>
            <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
              {[
                { id: 'caseStudy', label: 'Case Study' },
                { id: 'kuiz1', label: 'Kuiz 1' },
                { id: 'kuiz2', label: 'Kuiz 2' },
                { id: 'presentation', label: 'Presentation' },
                { id: 'final', label: 'Final Assessment' },
              ].map((item) => (
                <div key={item.id}>
                  <label className="block text-xs font-semibold uppercase text-indigo-700 mb-1">{item.label}</label>
                  <div className="relative">
                    <input 
                      type="number" 
                      value={weights[item.id]} 
                      onChange={(e) => handleWeightChange(item.id, e.target.value)}
                      min="0" 
                      max="100" 
                      className="w-full p-2 pr-8 rounded border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm"
                    />
                    <span className="absolute right-3 top-2 text-xs text-gray-500">%</span>
                  </div>
                </div>
              ))}
            </div>
            <div className="mt-4 p-3 bg-indigo-50 rounded-lg flex justify-between items-center">
              <p className="text-sm text-indigo-900">
                <span className="font-semibold">Jumlah Pemberat:</span> <span className={`font-bold text-lg ${weightWarning ? 'text-red-600' : 'text-green-600'}`}>{totalWeight}%</span>
              </p>
              {weightWarning && (
                <span className="text-xs text-red-600 font-bold bg-red-100 px-2 py-1 rounded flex items-center gap-1">
                  <AlertCircle className="w-3 h-3" /> Mesti sama dengan 100%
                </span>
              )}
            </div>
          </div>
        )}

{/* Quick Import */}
        <div className="bg-white rounded-xl shadow-sm p-6 border border-indigo-200">
          <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
            <FileText className="w-5 h-5 text-indigo-600" /> Import Senarai Pelajar
          </h2>
          <p className="text-sm text-gray-600 mb-3">Paste nama pelajar (satu nama setiap baris):</p>
          <textarea 
            value={importText}
            onChange={(e) => setImportText(e.target.value)}
            rows="4" 
            className="w-full p-3 rounded border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 font-mono text-sm resize-y"
            placeholder="NAMA PELAJAR 1
NAMA PELAJAR 2..."
          ></textarea>
          <button 
            onClick={importStudents}
            disabled={loading}
            className="mt-3 px-6 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white rounded-lg transition-colors font-medium shadow-sm flex items-center gap-2"
          >
            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
            Import Semua Pelajar
          </button>
        </div>

{/* Students Table */}
        <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
          <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
            <Users className="w-5 h-5 text-indigo-600" /> Senarai Pelajar
          </h2>
          <div className="overflow-x-auto">
            <table className="w-full border-collapse min-w-[900px]">
              <thead>
                <tr className="bg-indigo-50 text-indigo-900 text-xs uppercase tracking-wider">
                  <th className="p-3 text-left font-semibold rounded-tl-lg">Nama</th>
                  <th className="p-3 text-center font-semibold">Case Study ({weights.caseStudy}%)</th>
                  <th className="p-3 text-center font-semibold">Kuiz 1 ({weights.kuiz1}%)</th>
                  <th className="p-3 text-center font-semibold">Kuiz 2 ({weights.kuiz2}%)</th>
                  <th className="p-3 text-center font-semibold">Pres. ({weights.presentation}%)</th>
                  <th className="p-3 text-center font-semibold">Final ({weights.final}%)</th>
                  <th className="p-3 text-center font-semibold">Total</th>
                  <th className="p-3 text-center font-semibold">Gred</th>
                  <th className="p-3 text-center font-semibold rounded-tr-lg">Tindakan</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200">
                {students.length === 0 ? (
                  <tr>
                    <td colSpan="9" className="p-12 text-center text-gray-500">
                      <Inbox className="w-12 h-12 mx-auto mb-2 text-gray-300" />
                      <p>Tiada pelajar. Import senarai pelajar dahulu!</p>
                    </td>
                  </tr>
                ) : (
                  students.map((student) => {
                    const total = calculateTotal(student);
                    const grade = calculateGrade(total);
                    return (
                      <tr key={student.id} className="hover:bg-slate-50 transition-colors group">
                        <td className="p-3 text-gray-800 font-medium text-sm max-w-[200px] truncate" title={student.name}>
                          {student.name}
                        </td>
                        {[
                          { field: 'caseStudy', val: student.caseStudy },
                          { field: 'kuiz1', val: student.kuiz1 },
                          { field: 'kuiz2', val: student.kuiz2 },
                          { field: 'presentation', val: student.presentation },
                          { field: 'final', val: student.final },
                        ].map((cell, idx) => (
                          <td key={idx} className="p-2 text-center">
                            <div className="flex items-center justify-center gap-1">
                              <input 
                                type="number" 
                                defaultValue={cell.val || 0}
                                onBlur={(e) => updateMark(student.id, cell.field, e.target.value)}
                                // Use onKeyDown to allow Enter key to blur/submit
                                onKeyDown={(e) => {
                                  if (e.key === 'Enter') e.target.blur();
                                }}
                                min="0" 
                                max="100"
                                className="w-14 p-1 text-center text-sm rounded border border-gray-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all hover:border-gray-300"
                              />
                              <span className="text-[10px] text-gray-400 font-medium select-none">/100</span>
                            </div>
                          </td>
                        ))}
                        <td className="p-3 text-center font-bold text-gray-900 text-sm">
                          {total.toFixed(2)} <span className="text-[10px] text-gray-400 font-normal">/100</span>
                        </td>
                        <td className="p-3 text-center">
                          <span className={`inline-block w-8 py-1 rounded-md text-xs font-bold ${getGradeColor(grade)}`}>
                            {grade}
                          </span>
                        </td>
                        <td className="p-3 text-center">
                          <button 
                            onClick={() => deleteStudent(student.id)}
                            className="text-gray-400 hover:text-red-600 hover:bg-red-50 p-2 rounded-lg transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100"
                            title="Padam Pelajar"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </td>
                      </tr>
                    );
                  })
                )}
              </tbody>
            </table>
          </div>
        </div>

{/* Statistics Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
          <StatCard 
            icon={<Users className="w-6 h-6 text-blue-600" />}
            bgColor="bg-blue-100"
            label="Jumlah Pelajar"
            value={students.length}
          />
          <StatCard 
            icon={<TrendingUp className="w-6 h-6 text-green-600" />}
            bgColor="bg-green-100"
            label="Purata Markah"
            value={stats.avg}
          />
          <StatCard 
            icon={<Award className="w-6 h-6 text-purple-600" />}
            bgColor="bg-purple-100"
            label="Markah Tertinggi"
            value={stats.high}
          />
          <StatCard 
            icon={<Target className="w-6 h-6 text-orange-600" />}
            bgColor="bg-orange-100"
            label="Markah Terendah"
            value={stats.low}
          />
        </div>

</div>

{/* Toast Notification Container */}
      <div className="fixed top-4 right-4 z-50 flex flex-col gap-2">
        {toasts.map((toast) => (
          <div 
            key={toast.id}
            className="flex items-center gap-3 bg-white px-4 py-3 rounded-lg shadow-lg border-l-4 border-indigo-600 animate-in slide-in-from-right-full fade-in duration-300"
          >
            {toast.type === 'success' ? (
              <CheckCircle className="w-5 h-5 text-green-600" />
            ) : (
              <AlertCircle className="w-5 h-5 text-red-600" />
            )}
            <span className="font-medium text-gray-800 text-sm">{toast.message}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// Simple Subcomponent for Stat Cards to reduce clutter
function StatCard({ icon, bgColor, label, value }) {
  return (
    <div className="bg-white rounded-lg shadow-sm p-4 border border-gray-200 flex items-center gap-4">
      <div className={`p-3 rounded-lg ${bgColor}`}>
        {icon}
      </div>
      <div>
        <p className="text-xs text-gray-500 uppercase font-semibold">{label}</p>
        <p className="text-2xl font-bold text-gray-900">{value}</p>
      </div>
    </div>
  );
}