import React, { useEffect, useState } from 'react';
import { 
  Plus, FileText, Target, BookOpen, 
  ChevronRight, ClipboardList,
  X, Download, Filter,
  Sparkles, CheckCircle2,
  TrendingUp, BookText, Search
} from 'lucide-react';
import { useTeacherStore } from '../../store/teacher';

export function TeacherTools() {
  const { 
    syllabuses, schemes, focusPoints, lessonPlans,
    fetchSyllabuses, fetchSchemes, fetchFocusPoints, fetchLessonPlans,
    createSyllabus, createScheme, createFocusPoint, createLessonPlan
  } = useTeacherStore();
  
  const [activeTab, setActiveTab] = useState('syllabus');
  const [showModal, setShowModal] = useState(false);
  const [formData, setFormData] = useState<any>({});
  const [loading, setLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    setLoading(true);
    Promise.all([
        fetchSyllabuses(),
        fetchSchemes(),
        fetchFocusPoints(),
        fetchLessonPlans()
    ]).finally(() => setLoading(false));
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      if (activeTab === 'syllabus') await createSyllabus(formData);
      if (activeTab === 'scheme') await createScheme(formData);
      if (activeTab === 'focus') await createFocusPoint(formData);
      if (activeTab === 'lesson') await createLessonPlan(formData);
      setShowModal(false);
      setFormData({});
    } catch (err) {
      alert('Error saving intellectual record');
    }
  };

  const stats = [
    { label: 'Syllabuses', value: syllabuses.length, icon: FileText, color: 'blue' },
    { label: 'Schemes', value: schemes.length, icon: BookOpen, color: 'emerald' },
    { label: 'Focus Points', value: focusPoints.length || 0, icon: Target, color: 'orange' },
    { label: 'Lesson Units', value: lessonPlans.length, icon: ClipboardList, color: 'purple' },
  ];

  const tabs = [
    { id: 'syllabus', label: 'Syllabus', icon: FileText },
    { id: 'scheme', label: 'Schemes', icon: BookOpen },
    { id: 'focus', label: 'Focus', icon: Target },
    { id: 'lesson', label: 'Lessons', icon: ClipboardList }
  ];

  return (
    <div className="space-y-6 sm:space-y-8 animate-in fade-in duration-700 pb-24 sm:pb-10 px-0 sm:px-0">
      {/* Premium Header */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 px-4 sm:px-0">
        <div className="w-full md:w-auto">
          <h2 className="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white tracking-tight">Pedagogical Framework</h2>
          <nav className="flex text-[0.6rem] sm:text-[0.65rem] font-black uppercase tracking-[2px] text-slate-400 dark:text-slate-500 gap-2 items-center mt-1">
            <span className="truncate">Faculty Workspace</span>
            <ChevronRight size={10} className="shrink-0" />
            <span className="text-primary truncate">Teacher Tools</span>
          </nav>
        </div>
        <div className="flex w-full md:w-auto gap-2 sm:gap-3">
          <button className="flex-1 md:flex-none flex items-center justify-center gap-2 px-4 py-2.5 sm:px-5 sm:py-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 rounded-xl font-bold text-xs sm:text-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-all shadow-sm active:scale-95">
            <Download size={16} className="sm:size-18" />
            <span className="hidden xs:inline">Export</span>
          </button>
          <button 
            className="flex-[2] md:flex-none flex items-center justify-center gap-2 px-4 py-2.5 sm:px-6 sm:py-3 bg-primary text-white rounded-xl font-bold text-xs sm:text-sm hover:bg-primary/90 transition-all shadow-lg shadow-blue-900/10 active:scale-95"
            onClick={() => setShowModal(true)}
          >
            <Plus size={16} className="sm:size-18" />
            Add {tabs.find(t => t.id === activeTab)?.label}
          </button>
        </div>
      </div>

      {/* Stats Bento Grid */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 px-4 sm:px-0">
        {stats.map((stat) => (
          <div key={stat.label} className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3 sm:p-5 rounded-2xl flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 hover:shadow-md transition-all group cursor-default">
            <div className={`w-10 h-10 sm:w-12 sm:h-12 rounded-xl sm:rounded-2xl flex items-center justify-center shrink-0
              ${stat.color === 'blue' ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 border-blue-100 dark:border-blue-800' : 
                stat.color === 'emerald' ? 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400 border-emerald-100 dark:border-emerald-800' : 
                stat.color === 'orange' ? 'bg-orange-50 dark:bg-orange-900/20 text-orange-600 dark:text-orange-400 border-orange-100 dark:border-orange-800' : 
                'bg-purple-50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 border-purple-100 dark:border-purple-800'} 
              group-hover:scale-110 transition-transform border`}>
              <stat.icon size={18} className="sm:size-22" />
            </div>
            <div className="min-w-0">
              <p className="text-[0.55rem] sm:text-[0.65rem] font-black uppercase tracking-wider text-slate-400 dark:text-slate-500 truncate">{stat.label}</p>
              <div className="flex items-baseline gap-1 sm:gap-2">
                <p className="text-lg sm:text-2xl font-black text-slate-900 dark:text-white">{stat.value}</p>
                <span className="text-[0.5rem] sm:text-[0.6rem] font-bold text-slate-400">Records</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Tool Navigation */}
      <div className="px-4 sm:px-0 sticky top-16 lg:static z-[80]">
        <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-md border border-slate-200 dark:border-slate-700 rounded-2xl sm:rounded-[2rem] p-1.5 sm:p-2 shadow-sm flex flex-col lg:flex-row items-stretch lg:items-center gap-3">
          <div className="flex p-1 bg-slate-100 dark:bg-slate-900/50 rounded-xl sm:rounded-2xl flex-1 overflow-x-auto no-scrollbar">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`
                  flex-1 min-w-[80px] sm:min-w-0 px-3 sm:px-6 py-2 sm:py-3 rounded-lg sm:rounded-xl text-[0.6rem] sm:text-[0.7rem] font-black uppercase tracking-widest transition-all flex items-center justify-center gap-2
                  ${activeTab === tab.id 
                    ? 'bg-white dark:bg-slate-800 text-primary shadow-sm ring-1 ring-slate-200 dark:ring-slate-700' 
                    : 'text-slate-400 dark:text-slate-500 hover:text-slate-900 dark:hover:text-white'}
                `}
              >
                <tab.icon size={14} className="sm:size-16" />
                <span className={activeTab === tab.id ? 'inline' : 'hidden xs:inline'}>{tab.label}</span>
              </button>
            ))}
          </div>

          <div className="flex gap-2">
            <div className="relative flex-1 lg:w-64">
                <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                <input 
                    type="text"
                    placeholder="Search records..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="w-full pl-10 pr-4 py-2 sm:py-3 bg-slate-100 dark:bg-slate-900/50 border border-transparent focus:border-primary focus:bg-white dark:focus:bg-slate-800 rounded-xl text-xs sm:text-sm transition-all"
                />
            </div>
            <button className="px-4 sm:px-5 py-2 sm:py-3 bg-slate-100 dark:bg-slate-900/50 hover:bg-slate-200 dark:hover:bg-slate-900 text-slate-400 dark:text-slate-500 rounded-xl border border-transparent hover:border-slate-200 dark:hover:border-slate-700 transition-all flex items-center justify-center gap-2">
              <Filter size={16} sm:size={18} />
            </button>
          </div>
        </div>
      </div>

      {/* Content Area */}
      <div className="px-4 sm:px-0">
        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl sm:rounded-[2.5rem] shadow-sm overflow-hidden min-h-[400px]">
          {loading ? (
              <div className="py-20 text-center">
                  <div className="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
                  <p className="text-[0.65rem] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500">Accessing Pedagogical Vault...</p>
              </div>
          ) : (
              <div className="p-0 sm:p-2">
                  {activeTab === 'syllabus' && (
                      <div className="flex flex-col">
                          {/* Desktop Table View */}
                          <div className="hidden md:block">
                              <table className="w-full text-left">
                                  <thead>
                                      <tr className="bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-700">
                                          <th className="px-8 py-5 text-[0.65rem] font-black text-primary uppercase tracking-widest">Curriculum Title</th>
                                          <th className="px-8 py-5 text-[0.65rem] font-black text-primary uppercase tracking-widest">Core Subject</th>
                                          <th className="px-8 py-5 text-[0.65rem] font-black text-primary uppercase tracking-widest text-center">Revision</th>
                                          <th className="px-8 py-5 text-[0.65rem] font-black text-primary uppercase tracking-widest text-right">Actions</th>
                                      </tr>
                                  </thead>
                                  <tbody className="divide-y divide-slate-100 dark:divide-slate-700/50">
                                      {syllabuses.length === 0 ? (
                                          <tr>
                                              <td colSpan={4} className="py-20 text-center">
                                                  <FileText size={48} className="mx-auto text-slate-200 dark:text-slate-700 mb-4" />
                                                  <p className="text-[0.65rem] font-black uppercase tracking-widest text-slate-400">No records found</p>
                                              </td>
                                          </tr>
                                      ) : syllabuses.map((s) => (
                                          <tr key={s.uid} className="hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors group cursor-default">
                                              <td className="px-8 py-5">
                                                  <div className="flex items-center gap-4">
                                                      <div className="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 flex items-center justify-center border border-blue-100 dark:border-blue-800 group-hover:scale-110 transition-transform">
                                                          <BookText size={18} />
                                                      </div>
                                                      <div>
                                                          <p className="text-[0.9rem] font-bold text-slate-900 dark:text-white leading-tight">{s.title}</p>
                                                          <p className="text-[0.6rem] text-slate-400 font-black tracking-tighter uppercase mt-0.5">Ref: {s.uid.split('-')[0]}</p>
                                                      </div>
                                                  </div>
                                              </td>
                                              <td className="px-8 py-5">
                                                  <span className="px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-slate-600 text-[0.6rem] font-black uppercase tracking-widest">
                                                      {s.subject_name}
                                                  </span>
                                              </td>
                                              <td className="px-8 py-5 text-center font-mono text-xs font-bold text-slate-400">v{s.version}</td>
                                              <td className="px-8 py-5 text-right">
                                                  <button className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 hover:bg-primary text-primary hover:text-white rounded-xl text-[0.65rem] font-black uppercase tracking-widest transition-all">
                                                      <Download size={14} /> Download
                                                  </button>
                                              </td>
                                          </tr>
                                      ))}
                                  </tbody>
                              </table>
                          </div>

                          {/* Mobile Card View */}
                          <div className="md:hidden divide-y divide-slate-100 dark:divide-slate-700/50">
                              {syllabuses.length === 0 ? (
                                  <div className="py-20 text-center">
                                      <FileText size={48} className="mx-auto text-slate-200 dark:text-slate-700 mb-4" />
                                      <p className="text-[0.65rem] font-black uppercase tracking-widest text-slate-400">No records found</p>
                                  </div>
                              ) : syllabuses.map((s) => (
                                  <div key={s.uid} className="p-4 space-y-4">
                                      <div className="flex items-start justify-between gap-4">
                                          <div className="flex items-center gap-3">
                                              <div className="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 flex items-center justify-center border border-blue-100 dark:border-blue-800 shrink-0">
                                                  <BookText size={18} />
                                              </div>
                                              <div className="min-w-0">
                                                  <p className="text-sm font-bold text-slate-900 dark:text-white leading-tight break-words">{s.title}</p>
                                                  <p className="text-[0.55rem] text-slate-400 font-black tracking-tighter uppercase">v{s.version} • Ref: {s.uid.split('-')[0]}</p>
                                              </div>
                                          </div>
                                          <span className="px-2 py-1 rounded-md bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 text-[0.55rem] font-black uppercase tracking-widest border border-slate-200 dark:border-slate-600 shrink-0">
                                              {s.subject_name}
                                          </span>
                                      </div>
                                      <button className="w-full flex items-center justify-center gap-2 py-3 bg-primary/10 text-primary rounded-xl text-[0.65rem] font-black uppercase tracking-widest transition-all active:scale-[0.98]">
                                          <Download size={14} /> Download Curriculum
                                      </button>
                                  </div>
                              ))}
                          </div>
                      </div>
                  )}

                  {activeTab === 'scheme' && (
                      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 p-4 sm:p-6 lg:p-10">
                          {schemes.length === 0 ? (
                              <div className="col-span-full py-20 text-center opacity-30">
                                  <BookOpen size={64} className="mx-auto mb-4" />
                                  <p className="text-lg sm:text-xl font-black uppercase tracking-widest">No Schemes Initialized</p>
                              </div>
                          ) : schemes.map((s) => (
                              <div key={s.uid} className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl sm:rounded-[2rem] p-5 sm:p-8 hover:shadow-xl hover:shadow-blue-900/5 transition-all group relative overflow-hidden flex flex-col">
                                  <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-slate-100 dark:bg-slate-700/50 rounded-bl-[2.5rem] sm:rounded-bl-[3rem] -mr-8 -mt-8 group-hover:bg-blue-50/20 transition-colors"></div>
                                  
                                  <div className="relative z-10 flex justify-between items-start mb-4 sm:mb-6">
                                      <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-800 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
                                          <TrendingUp size={18} sm:size={22} />
                                      </div>
                                      <span className="px-2 sm:px-3 py-1 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-[0.55rem] sm:text-[0.6rem] font-black rounded-lg uppercase tracking-widest border border-emerald-200 dark:border-emerald-800 shrink-0">
                                          Term {s.term}
                                      </span>
                                  </div>

                                  <div className="relative z-10 mb-6 sm:mb-8 flex-grow">
                                      <h3 className="text-lg sm:text-xl font-black text-slate-900 dark:text-white tracking-tighter group-hover:text-primary transition-colors leading-tight">{s.subject_name}</h3>
                                      <p className="text-[0.6rem] sm:text-[0.65rem] font-black uppercase tracking-[2px] text-slate-400 mt-1">Cycle: {s.academic_year}</p>
                                  </div>

                                  <div className="mt-auto pt-4 sm:pt-6 border-t border-slate-100 dark:border-slate-700 flex items-center justify-between">
                                      <div className="flex items-center gap-2 text-[0.6rem] sm:text-[0.65rem] font-black text-primary uppercase tracking-widest group-hover:translate-x-1 transition-transform cursor-pointer">
                                          View Strategy <ChevronRight size={14} />
                                      </div>
                                      <div className="flex -space-x-2">
                                          {[1,2].map(i => (
                                              <div key={i} className="w-6 h-6 sm:w-7 sm:h-7 rounded-full border-2 border-white dark:border-slate-800 bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-[0.5rem] font-bold text-slate-400 shrink-0">
                                                  JD
                                              </div>
                                          ))}
                                      </div>
                                  </div>
                              </div>
                          ))}
                      </div>
                  )}

                  {(activeTab === 'focus' || activeTab === 'lesson') && (
                      <div className="py-20 text-center px-4">
                          <ClipboardList size={48} className="mx-auto text-slate-200 dark:text-slate-700 mb-4 opacity-50" />
                          <p className="text-[0.65rem] font-black uppercase tracking-widest text-slate-400">Modular view coming soon</p>
                          <p className="text-[0.55rem] text-slate-300 dark:text-slate-600 mt-2">Enhanced pedagogical tracking in development</p>
                      </div>
                  )}
              </div>
          )}
        </div>
      </div>

      {/* Creation Modal */}
      {showModal && (
        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[200] flex items-center justify-center p-3 sm:p-4">
          <div className="bg-white dark:bg-slate-800 rounded-3xl sm:rounded-[2.5rem] w-full max-w-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200 max-h-[95vh] flex flex-col border border-slate-200 dark:border-slate-700">
            <div className="px-6 py-6 sm:px-10 sm:py-8 bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center relative overflow-hidden shrink-0">
              <div className="absolute right-[-20px] top-[-20px] opacity-[0.03] rotate-12 pointer-events-none">
                <Sparkles size={180} />
              </div>
              <div className="relative z-10">
                <h2 className="text-xl sm:text-2xl font-black text-slate-900 dark:text-white tracking-tight uppercase">Add {activeTab}</h2>
                <p className="text-[0.55rem] sm:text-[0.6rem] font-bold text-slate-400 uppercase tracking-widest mt-1">Initialize educational module</p>
              </div>
              <button onClick={() => setShowModal(false)} className="relative z-10 w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-rose-500 transition-all shadow-sm">
                <X size={20} />
              </button>
            </div>

            <form onSubmit={handleSubmit} className="p-6 sm:p-10 space-y-5 sm:space-y-6 overflow-y-auto flex-1 custom-scrollbar">
              {activeTab === 'syllabus' && (
                <>
                  <div className="space-y-1.5">
                    <label className="text-[0.55rem] sm:text-[0.6rem] font-black uppercase tracking-[2px] text-slate-400 px-1">Curriculum Title</label>
                    <input className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all" onChange={e => setFormData({...formData, title: e.target.value})} placeholder="e.g., Advanced Mathematics - Grade 12" required />
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                    <div className="space-y-1.5">
                        <label className="text-[0.55rem] sm:text-[0.6rem] font-black uppercase tracking-[2px] text-slate-400 px-1">Subject Registry</label>
                        <input className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all" onChange={e => setFormData({...formData, subject_name: e.target.value})} placeholder="e.g., Mathematics" required />
                    </div>
                    <div className="space-y-1.5">
                        <label className="text-[0.55rem] sm:text-[0.6rem] font-black uppercase tracking-[2px] text-slate-400 px-1">Version Intel</label>
                        <input className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 rounded-xl text-sm font-mono focus:ring-2 focus:ring-primary/20 outline-none transition-all" onChange={e => setFormData({...formData, version: e.target.value})} placeholder="1.0.0" />
                    </div>
                  </div>
                </>
              )}

              {activeTab === 'lesson' && (
                <>
                  <div className="space-y-1.5">
                    <label className="text-[0.55rem] sm:text-[0.6rem] font-black uppercase tracking-[2px] text-slate-400 px-1">Transmission Topic</label>
                    <input className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all" onChange={e => setFormData({...formData, topic: e.target.value})} placeholder="e.g., Quantum Entanglement Basics" required />
                  </div>
                  <div className="space-y-1.5">
                    <label className="text-[0.55rem] sm:text-[0.6rem] font-black uppercase tracking-[2px] text-slate-400 px-1">Strategic Objectives</label>
                    <textarea className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all min-h-[80px] sm:min-h-[100px]" onChange={e => setFormData({...formData, objectives: e.target.value})} placeholder="Outline key learner outcomes..." rows={3} />
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                    <div className="space-y-1.5">
                        <label className="text-[0.55rem] sm:text-[0.6rem] font-black uppercase tracking-[2px] text-slate-400 px-1">Transmission Start</label>
                        <textarea className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all" onChange={e => setFormData({...formData, introduction: e.target.value})} placeholder="Hook & introduction..." rows={3} />
                    </div>
                    <div className="space-y-1.5">
                        <label className="text-[0.55rem] sm:text-[0.6rem] font-black uppercase tracking-[2px] text-slate-400 px-1">Concept Development</label>
                        <textarea className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all" onChange={e => setFormData({...formData, development: e.target.value})} placeholder="Core instructional steps..." rows={3} />
                    </div>
                  </div>
                </>
              )}

              <button type="submit" className="w-full py-4 sm:py-5 bg-primary hover:bg-primary/90 text-white font-black uppercase tracking-widest text-[0.65rem] sm:text-xs rounded-2xl transition-all shadow-xl active:scale-95 flex items-center justify-center gap-3 mt-4">
                <CheckCircle2 size={18} />
                Finalize Record
              </button>
            </form>
          </div>
        </div>
      )}

      <style>{`
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0, 71, 171, 0.1); border-radius: 10px; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      `}</style>
    </div>
  );
}
