import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, doc, setDoc, onSnapshot } from 'firebase/firestore';
import { 
  User, GraduationCap, Zap, Code, Rocket, 
  Users, Target, Award, ShieldCheck, Mail,
  Menu, X, MapPin, Calendar, Quote, Cpu, 
  MessageCircle, Heart, Image as ImageIcon,
  Palette, Star, CheckCircle, Music, Droplets, 
  BookOpen, ChevronLeft, ChevronRight, Save, Edit3, Eye, FileText, Layout, BarChart3, Info
} from 'lucide-react';

// --- 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-tcas-folio';

// --- Initial Data Structure (11 Pages) ---
const defaultData = {
  pages: [
    { id: 0, title: 'หน้าปก', sub: 'Cover Page', type: 'cover', name: 'กีรติ คชฤทธิ์', school: 'โรงเรียนนารีนุกูล', faculty: 'คณะศิลปะและการออกแบบ', image: 'https://i.postimg.cc/v81rhMq4/639233864-1638539384263808-1956064543193193054-n.jpg' },
    { id: 1, title: 'คำนำ', sub: 'Preface', type: 'text', content: 'แฟ้มสะสมผลงานฉบับนี้จัดทำขึ้นเพื่อนำเสนอตัวตน ทักษะ และความมุ่งมั่นของข้าพเจ้าที่มีต่อการศึกษาในคณะศิลปะและการออกแบบ โดยภายในประกอบด้วยผลงานที่เกิดจากความมุ่งมั่นสร้างสรรค์และการฝึกฝนอย่างต่อเนื่องผ่านประสบการณ์จริง ข้าพเจ้าเชื่อมั่นว่าศิลปะและการออกแบบคือหัวใจสำคัญในการสื่อสารความหมายและคุณค่าของนวัตกรรมสมัยใหม่สู่สายตาชาวโลก ข้าพเจ้าจึงมีความมุ่งมั่นที่จะพัฒนาศักยภาพของตนเองในด้านความคิดสร้างสรรค์อย่างเป็นระบบเพื่อก้าวสู่การเป็นนักออกแบบมืออาชีพที่มีคุณภาพในอนาคต สุดท้ายนี้ ข้าพเจ้าหวังเป็นอย่างยิ่งว่าแฟ้มสะสมผลงานเล่มนี้จะช่วยสะท้อนให้เห็นถึงความพร้อมและแรงผลักดันที่ข้าพเจ้ามีต่อคณะที่ใฝ่ฝันอย่างแท้จริง', image: '' },
    { id: 2, title: 'ประวัติส่วนตัว', sub: 'Biography', type: 'profile', birthday: '14 สิงหาคม 2552', location: 'อุบลราชธานี', motto: 'ทำสิ่งที่ถูกต้อง แม้จะเสียเปรียบก็ตาม', image: 'https://i.postimg.cc/v81rhMq4/639233864-1638539384263808-1956064543193193054-n.jpg' },
    { id: 3, title: 'ประวัติการศึกษา', sub: 'Education', type: 'education', schoolName: 'โรงเรียนนารีนุกูล', plan: 'ศิลป์-ภาษาอังกฤษ', year: '2024', gpa: '4.00' },
    { id: 4, title: 'แดชบอร์ดความสำเร็จ', sub: 'Progress Dashboard', type: 'dashboard', description: 'สรุปสถานะการเตรียมข้อมูลและโครงสร้างพอร์ตโฟลิโอ' },
    { id: 5, title: 'กิจกรรม 1', sub: 'Activity 1', type: 'activity', name: 'อาสาสมัครช่วยบริจาคน้ำที่วัดหนองป่าพง', role: 'จิตอาสา / 志愿者 / Volunteer', result: 'ช่วยเหลือชุมชนและสนับสนุนงานบำเพ็ญกุศลทางศาสนา', image: 'https://i.postimg.cc/cCQ283PQ/y-wa.jpg', 
      desc_multilang: "TH: ข้าพเจ้าได้ร่วมกิจกรรมจิตอาสาช่วยบริจาคน้ำดื่มที่วัดหนองป่าพง เพื่อสนับสนุนงานบำเพ็ญกุศลและอำนวยความสะดวกแก่ผู้มาร่วมงาน กิจกรรมนี้ช่วยให้ข้าพเจ้าได้เรียนรู้การทำงานเพื่อส่วนรวมและการเสียสละ\nCN: 我参加了在 Wat Nong Pah Pong 寺院捐赠饮用水的志愿活动，旨在支持宗教活动并为社区服务。这一活动培养了我的公共意识。\nEN: I volunteered to donate drinking water at Wat Nong Pah Pong to support religious ceremonies and serve the community, which fostered my sense of social responsibility." },
    { id: 6, title: 'กิจกรรม 2', sub: 'Activity 2', type: 'activity', name: 'ดูงานที่มหาลัยจุฬา', role: 'ผู้เข้าร่วมศึกษาดูงาน / 参观者 / Participant', result: 'เรียนรู้เทคนิคการถ่ายภาพเชิงสร้างสรรค์', image: 'https://i.postimg.cc/2jwx3TKs/588647174-1530741075330940-3401021406201802903-n.jpg',
      desc_multilang: "TH: เข้าร่วมศึกษาดูงาน ณ จุฬาลงกรณ์มหาวิทยาลัย เพื่อเรียนรู้เทคนิคการถ่ายภาพเบื้องต้นและการจัดวางองค์ประกอบภาพให้เหมาะสม เพื่อสื่อสารเรื่องราวผ่านเลนส์ได้อย่างมีประสิทธิภาพ\nCN: 参观朱拉隆功大学，学习摄影技巧和视觉构图，通过镜头有效传达故事。\nEN: Field trip to Chulalongkorn University to learn photography techniques and composition for effective visual storytelling." },
    { id: 7, title: 'กิจกรรม 3', sub: 'Activity 3', type: 'activity', name: 'งานวาดรูปคอมมิชชันที่ตลาด', role: 'ศิลปินอิสระ / 独立艺术家 / Freelance Artist', result: 'ฝึกทักษะการวาดภาพสดและการสื่อสารกับลูกค้า', image: 'https://i.postimg.cc/VLV2TYmN/639340363-26117273227885428-164619013349388829-n.jpg',
      desc_multilang: "TH: ข้าพเจ้าได้นำทักษะด้านศิลปะมาสร้างรายได้เสริมด้วยการวาดรูปพอร์ตเทรตขายที่ตลาด ซึ่งช่วยฝึกฝนทักษะการวาดรูปสดและการบริหารจัดการธุรกิจขนาดเล็ก\nCN: 在当地市场现场绘画并出售，不仅提升了绘画速度，也锻炼了与客户沟通的能力。\nEN: Utilized artistic skills to sell custom drawings at the market, improving live sketching skills and client communication." },
    { id: 8, title: 'เกียรติบัตร 1', sub: 'Certificate 1', type: 'cert', name: 'รางวัลชนะเลิศศิลปหัตถกรรม ครั้งที่ 70', detail: 'ด้านศิลปะและการออกแบบ', image: 'https://i.postimg.cc/y6vr2Vs8/638428575-1461386372168802-5814610247725407885-n.jpg',
      desc_multilang: "TH: รางวัลชนะเลิศ เหรียญทอง กิจกรรมการแข่งขันศิลปหัตถกรรมนักเรียน ระดับชาติ ครั้งที่ 70\nCN: 第70届学生艺术与手工艺比赛金牌冠军。\nEN: First Prize (Gold Medal), 70th National Student Arts and Crafts Competition." },
    { id: 9, title: 'เกียรติบัตร 2', sub: 'Certificate 2', type: 'cert', name: 'รางวัลรองชนะเลิศศิลปหัตถกรรม ครั้งที่ 71', detail: 'การเข้าร่วมโครงการพิเศษ', image: 'https://i.postimg.cc/BbYYFCMq/636507524-1250823250335963-4015151581273909575-n.jpg',
      desc_multilang: "TH: รางวัลรองชนะเลิศ เหรียญเงิน กิจกรรมการแข่งขันศิลปหัตถกรรมนักเรียน ระดับชาติ ครั้งที่ 71\nCN: 第71届学生艺术与手工艺比赛银牌亚军。\nEN: Runner-up (Silver Medal), 71st National Student Arts and Crafts Competition." },
    { id: 10, title: 'การติดต่อ', sub: 'Contact', type: 'closing', email: 'nammm140852@gmail.com', message: 'ขอขอบคุณคณะกรรมการทุกท่านครับ' },
  ]
};

export default function App() {
  const [user, setUser] = useState(null);
  const [data, setData] = useState(null);
  const [activeTab, setActiveTab] = useState(0);
  const [isAdmin, setIsAdmin] = useState(false);
  const [pin, setPin] = useState("");
  const [isSaving, setIsSaving] = useState(false);
  const [loading, setLoading] = useState(true);

  // --- 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 (err) {
        console.error("Auth initialization failed:", err);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => setUser(u));
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!user) return;
    const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'portfolio_collection', 'main_data');
    const unsub = onSnapshot(docRef, (docSnap) => {
      if (docSnap.exists()) {
        setData(docSnap.data());
      } else {
        setDoc(docRef, defaultData).catch(err => console.error("Initial setDoc failed:", err));
        setData(defaultData);
      }
      setLoading(false);
    }, (err) => {
      console.error("Firestore snapshot error:", err);
      setLoading(false);
    });
    return () => unsub();
  }, [user]);

  // --- Handlers ---
  const checkPin = () => {
    if (pin === "1234") {
      setIsAdmin(!isAdmin);
      setPin("");
    } else {
      setPin("");
    }
  };

  const handleUpdate = (pageIdx, field, val) => {
    if (!data) return;
    const newData = { ...data };
    newData.pages[pageIdx][field] = val;
    setData(newData);
  };

  const handleSave = async () => {
    if (!user || !data) return;
    setIsSaving(true);
    try {
      const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'portfolio_collection', 'main_data');
      await setDoc(docRef, data);
      setIsAdmin(false);
    } catch (e) {
      console.error("Save error:", e);
    } finally {
      setIsSaving(false);
    }
  };

  // --- Helpers for Dashboard ---
  const calculateCompletion = () => {
    if (!data) return 0;
    let totalFields = 0;
    let filledFields = 0;

    data.pages.forEach(p => {
      if (p.type === 'dashboard') return;
      Object.keys(p).forEach(key => {
        if (['id', 'title', 'sub', 'type'].includes(key)) return;
        totalFields++;
        if (p[key] && p[key].toString().trim() !== "" && p[key].toString().trim() !== "X.XX") {
          filledFields++;
        }
      });
    });
    return Math.round((filledFields / totalFields) * 100);
  };

  const getPageStatus = (page) => {
    if (page.type === 'dashboard') return true;
    let importantFields = Object.keys(page).filter(k => !['id', 'title', 'sub', 'type'].includes(k));
    return importantFields.every(k => page[k] && page[k].toString().trim() !== "");
  };

  // --- Components ---
  const EditableField = ({ label, value, onUpdate, isArea = false }) => {
    const displayValue = (typeof value === 'string' || typeof value === 'number') ? value : "";
    if (!isAdmin) return <span className="whitespace-pre-wrap">{displayValue || "-"}</span>;
    return (
      <div className="w-full space-y-1 my-2 text-left">
        <label className="text-[10px] font-black text-blue-500 uppercase tracking-widest">{label}</label>
        {isArea ? (
          <textarea 
            className="w-full bg-slate-900/50 border border-white/10 rounded-xl p-3 text-white focus:border-blue-500 outline-none text-sm min-h-[120px]"
            value={displayValue} 
            onChange={(e) => onUpdate(e.target.value)}
          />
        ) : (
          <input 
            className="w-full bg-slate-900/50 border border-white/10 rounded-xl p-3 text-white focus:border-blue-500 outline-none text-sm"
            value={displayValue} 
            onChange={(e) => onUpdate(e.target.value)}
          />
        )}
      </div>
    );
  };

  const PageIcon = ({ type }) => {
    switch (type) {
      case 'cover': return <Layout size={18} />;
      case 'text': return <FileText size={18} />;
      case 'profile': return <User size={18} />;
      case 'education': return <GraduationCap size={18} />;
      case 'dashboard': return <BarChart3 size={18} />;
      case 'activity': return <Zap size={18} />;
      case 'cert': return <Award size={18} />;
      default: return <Mail size={18} />;
    }
  };

  if (loading || !data) return (
    <div className="min-h-screen bg-slate-950 flex items-center justify-center">
      <div className="flex flex-col items-center space-y-4">
        <div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
        <p className="text-slate-500 font-black text-xs uppercase tracking-widest">กำลังดึงข้อมูล...</p>
      </div>
    </div>
  );

  const currentPage = data.pages[activeTab];

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans selection:bg-blue-500/30 flex">
      {/* --- Left Sidebar Navigation --- */}
      <aside className="w-20 md:w-64 flex-shrink-0 bg-slate-950/40 backdrop-blur-3xl border-r border-white/5 flex flex-col fixed h-full z-50">
        <div className="p-6 flex items-center justify-center md:justify-start space-x-3">
          <div className="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center font-black text-xl">K</div>
          <div className="hidden md:block">
            <p className="font-black text-sm tracking-tighter leading-none">TCAS<span className="text-blue-500">FOLIO</span></p>
            <p className="text-[9px] font-black text-slate-500 uppercase tracking-widest mt-1">Version 3.1</p>
          </div>
        </div>

        <nav className="flex-1 overflow-y-auto p-3 space-y-1 custom-scrollbar">
          {data.pages.map((p, i) => (
            <button
              key={i}
              onClick={() => setActiveTab(i)}
              className={`w-full flex items-center space-x-3 p-3 rounded-2xl transition-all duration-300 ${
                activeTab === i 
                ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20 scale-[1.02]' 
                : 'text-slate-500 hover:bg-white/5 hover:text-slate-300'
              }`}
            >
              <div className="shrink-0"><PageIcon type={p.type} /></div>
              <div className="hidden md:block text-left">
                <p className="text-[10px] font-black uppercase tracking-widest opacity-60 leading-none mb-1">{p.sub}</p>
                <p className="text-xs font-bold whitespace-nowrap">{p.title}</p>
              </div>
            </button>
          ))}
        </nav>

        <div className="p-4 border-t border-white/5 hidden md:block">
           <p className="text-[9px] font-black text-slate-600 text-center uppercase tracking-widest">© 2024 KEERATI PORTFOLIO</p>
        </div>
      </aside>

      {/* --- Main Content Area --- */}
      <main className="flex-1 ml-20 md:ml-64 min-h-screen relative overflow-x-hidden">
        {/* Top Header Controls */}
        <header className="fixed top-0 right-0 left-20 md:left-64 z-40 bg-slate-950/20 backdrop-blur-xl px-8 py-4 flex justify-between items-center border-b border-white/5">
           <div className="flex items-center space-x-3">
              <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">หน้าปัจจุบัน:</span>
              <span className="text-xs font-bold text-blue-400">{currentPage?.title}</span>
           </div>
           
           <div className="flex items-center space-x-3">
              <div className="flex items-center space-x-2 bg-white/5 p-1 rounded-xl border border-white/5">
                <input 
                  type="password" 
                  placeholder="PIN" 
                  value={pin}
                  onChange={(e) => setPin(e.target.value)}
                  className="w-16 bg-transparent text-center text-xs font-bold outline-none"
                />
                <button 
                  onClick={checkPin}
                  className={`p-2 rounded-lg transition-all ${isAdmin ? 'bg-blue-500 text-white' : 'text-slate-500 hover:text-white'}`}
                >
                  {isAdmin ? <Eye size={16} /> : <Edit3 size={16} />}
                </button>
              </div>

              {isAdmin && (
                <button 
                  onClick={handleSave}
                  disabled={isSaving}
                  className="bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2 rounded-xl text-xs font-black flex items-center space-x-2 shadow-lg disabled:opacity-50"
                >
                  <Save size={16} /> <span>{isSaving ? 'Saving...' : 'SAVE'}</span>
                </button>
              )}
           </div>
        </header>

        {/* Content Section */}
        <section className="pt-24 pb-32 px-6 md:px-12 max-w-5xl mx-auto">
          {currentPage && (
            <div className="animate-in fade-in slide-in-from-bottom-8 duration-700">
              {currentPage.type === 'cover' && (
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                  <div className="relative group max-w-sm mx-auto">
                    <div className="absolute -inset-4 bg-blue-600/20 blur-3xl rounded-full"></div>
                    <div className="aspect-[3/4] rounded-[2.5rem] overflow-hidden border border-white/10 shadow-2xl bg-slate-900/50">
                      <img src={currentPage.image} alt="Cover" className="w-full h-full object-cover" onError={(e) => {e.target.src='https://via.placeholder.com/800x1200?text=Invalid+Image'}} />
                    </div>
                    {isAdmin && <EditableField label="URL รูปภาพหน้าปก" value={currentPage.image} onUpdate={(v) => handleUpdate(activeTab, 'image', v)} />}
                  </div>
                  <div className="text-center lg:text-left space-y-6">
                    <h1 className="text-7xl font-black text-white leading-none tracking-tighter">PORT<span className="text-blue-500">FOLIO</span></h1>
                    <div className="space-y-4">
                      <h2 className="text-4xl font-bold text-slate-300">
                        <EditableField label="ชื่อ-นามสกุล" value={currentPage.name} onUpdate={(v) => handleUpdate(activeTab, 'name', v)} />
                      </h2>
                      <p className="text-xl text-blue-400 font-bold">
                        <EditableField label="โรงเรียน" value={currentPage.school} onUpdate={(v) => handleUpdate(activeTab, 'school', v)} />
                      </p>
                      <div className="p-6 bg-white/5 rounded-3xl border border-white/10">
                        <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">คณะที่ต้องการสมัคร</p>
                        <p className="text-2xl font-black text-white">
                          <EditableField label="คณะ" value={currentPage.faculty} onUpdate={(v) => handleUpdate(activeTab, 'faculty', v)} />
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {currentPage.type === 'text' && (
                <div className="max-w-4xl mx-auto text-center space-y-10">
                  <h2 className="text-5xl font-black text-white uppercase tracking-tighter">คำนำ</h2>
                  <div className="bg-slate-900/40 backdrop-blur-xl p-10 md:p-14 rounded-[3.5rem] border border-white/5 relative shadow-2xl text-left">
                    <Quote size={64} className="absolute -top-4 -left-4 text-blue-500/20" />
                    <div className="text-lg md:text-xl leading-relaxed text-slate-300 italic">
                      <EditableField isArea label="เนื้อหาคำนำ (ควรเขียนอย่างน้อย 5 บรรทัด)" value={currentPage.content} onUpdate={(v) => handleUpdate(activeTab, 'content', v)} />
                    </div>
                  </div>
                </div>
              )}

              {currentPage.type === 'profile' && (
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center text-left">
                  <div className="space-y-8">
                    <h2 className="text-5xl font-black text-white uppercase tracking-tighter">ประวัติส่วนตัว</h2>
                    <div className="grid gap-4">
                      {[
                        { l: 'วันเกิด', v: currentPage.birthday, f: 'birthday', i: <Calendar /> },
                        { l: 'ที่อยู่', v: currentPage.location, f: 'location', i: <MapPin /> },
                        { l: 'คติประจำใจ', v: currentPage.motto, f: 'motto', i: <Quote /> }
                      ].map((item, idx) => (
                        <div key={idx} className="bg-white/5 p-6 rounded-2xl border border-white/5 flex items-center space-x-5">
                          <div className="w-12 h-12 bg-blue-500/10 text-blue-400 rounded-xl flex items-center justify-center">{item.i}</div>
                          <div className="flex-1">
                            <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest">{item.l}</p>
                            <div className="text-lg font-bold text-white">
                              <EditableField label={item.l} value={item.v} onUpdate={(v) => handleUpdate(activeTab, item.f, v)} />
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                  <div className="relative group">
                     <div className="aspect-square rounded-[3rem] overflow-hidden border border-white/10 shadow-2xl">
                       <img src={currentPage.image} alt="Profile" className="w-full h-full object-cover" onError={(e) => {e.target.src='https://via.placeholder.com/800x800?text=Invalid+Image'}} />
                     </div>
                     {isAdmin && <EditableField label="URL รูปภาพโปรไฟล์" value={currentPage.image} onUpdate={(v) => handleUpdate(activeTab, 'image', v)} />}
                  </div>
                </div>
              )}

              {currentPage.type === 'education' && (
                <div className="max-w-4xl mx-auto space-y-12">
                  <h2 className="text-5xl font-black text-white uppercase tracking-tighter text-center">ประวัติการศึกษา</h2>
                  <div className="bg-gradient-to-br from-blue-600 to-indigo-900 p-12 rounded-[3.5rem] shadow-2xl relative overflow-hidden group">
                    <GraduationCap size={150} className="absolute -bottom-10 -right-10 text-white/5 group-hover:rotate-12 transition-transform duration-700" />
                    <div className="relative space-y-6 text-left">
                      <p className="text-xs font-black text-white/50 uppercase tracking-[0.4em]">Current Education</p>
                      <div className="text-5xl font-black text-white">
                        <EditableField label="โรงเรียน" value={currentPage.schoolName} onUpdate={(v) => handleUpdate(activeTab, 'schoolName', v)} />
                      </div>
                      <div className="grid grid-cols-2 gap-8">
                         <div>
                           <p className="text-xs font-black text-white/50 uppercase tracking-widest">สายการเรียน</p>
                           <div className="text-xl font-bold text-white"><EditableField label="แผนกการเรียน" value={currentPage.plan} onUpdate={(v) => handleUpdate(activeTab, 'plan', v)} /></div>
                         </div>
                         <div>
                           <p className="text-xs font-black text-white/50 uppercase tracking-widest">เกรดเฉลี่ย (GPAX)</p>
                           <div className="text-xl font-bold text-white"><EditableField label="GPA" value={currentPage.gpa} onUpdate={(v) => handleUpdate(activeTab, 'gpa', v)} /></div>
                         </div>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {currentPage.type === 'dashboard' && (
                <div className="max-w-5xl mx-auto space-y-12">
                   <div className="text-center space-y-4">
                     <h2 className="text-5xl font-black text-white uppercase tracking-tighter">SUCCESS DASHBOARD</h2>
                     <p className="text-slate-400 font-bold tracking-widest uppercase text-xs">ภาพรวมความสำเร็จและการบันทึกข้อมูลนำเสนอ</p>
                   </div>

                   <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                      {/* Left: Completion Chart */}
                      <div className="lg:col-span-1 bg-slate-900/60 p-10 rounded-[3rem] border border-white/10 flex flex-col items-center justify-center space-y-6 shadow-2xl">
                         <div className="relative w-48 h-48 flex items-center justify-center">
                            <svg className="w-full h-full transform -rotate-90">
                               <circle cx="96" cy="96" r="85" fill="transparent" stroke="currentColor" strokeWidth="15" className="text-white/5" />
                               <circle cx="96" cy="96" r="85" fill="transparent" stroke="currentColor" strokeWidth="15" strokeDasharray={534} strokeDashoffset={534 - (534 * calculateCompletion()) / 100} strokeLinecap="round" className="text-blue-500 transition-all duration-1000 ease-out" />
                            </svg>
                            <div className="absolute inset-0 flex flex-col items-center justify-center">
                               <span className="text-5xl font-black text-white">{calculateCompletion()}%</span>
                               <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Completed</span>
                            </div>
                         </div>
                         <div className="text-center">
                            <p className="text-sm font-bold text-slate-300">ความคืบหน้าการกรอกข้อมูล</p>
                            <p className="text-[10px] text-slate-500 uppercase mt-1 tracking-widest">คำนวณจากทุกส่วนที่สำคัญ</p>
                         </div>
                      </div>

                      {/* Right: Structure Overview */}
                      <div className="lg:col-span-2 bg-slate-900/40 p-10 rounded-[3rem] border border-white/5 shadow-2xl space-y-6">
                         <div className="flex items-center space-x-3 text-blue-400 mb-4">
                            <Info size={20} />
                            <h3 className="font-black uppercase tracking-widest text-sm">โครงสร้างและการนำเสนอแต่ละหน้า</h3>
                         </div>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-[400px] overflow-y-auto pr-4 custom-scrollbar text-left">
                            {data.pages.map((p, i) => (
                              <div key={i} className={`p-4 rounded-2xl border transition-all ${getPageStatus(p) ? 'bg-emerald-500/5 border-emerald-500/20' : 'bg-white/5 border-white/5 opacity-60'}`}>
                                 <div className="flex justify-between items-start mb-2">
                                    <div className={`p-2 rounded-lg ${activeTab === i ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-400'}`}>
                                       <PageIcon type={p.type} />
                                    </div>
                                    {getPageStatus(p) ? <CheckCircle size={16} className="text-emerald-500" /> : <div className="w-4 h-4 rounded-full border border-slate-700" />}
                                 </div>
                                 <p className="text-xs font-black text-white">{p.title}</p>
                                 <p className="text-[9px] text-slate-500 uppercase tracking-tighter mt-1 leading-tight">
                                    {p.type === 'cover' ? 'ความประทับใจแรกและข้อมูลพื้นฐาน' : 
                                     p.type === 'text' ? 'ทัศนคติและความมุ่งมั่นในการเรียน' :
                                     p.type === 'profile' ? 'ตัวตนและไลฟ์สไตล์ที่น่าสนใจ' :
                                     p.type === 'education' ? 'ศักยภาพทางวิชาการและผลการเรียน' :
                                     p.type === 'activity' ? 'ทักษะชีวิต การทำงานทีม และจิตอาสา' :
                                     p.type === 'cert' ? 'การรับรองความสามารถและความสำเร็จ' :
                                     p.type === 'dashboard' ? 'สรุปความสมบูรณ์ของเอกสาร' : 'ช่องทางการสื่อสารอย่างเป็นทางการ'}
                                 </p>
                              </div>
                            ))}
                         </div>
                      </div>
                   </div>
                </div>
              )}

              {(currentPage.type === 'activity' || currentPage.type === 'cert') && (
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start text-left">
                  <div className="relative w-full">
                    <div className={`${currentPage.type === 'cert' ? 'aspect-[1.414/1]' : 'aspect-video'} bg-slate-900/50 rounded-3xl overflow-hidden border border-white/10 shadow-2xl`}>
                      <img src={currentPage.image} alt="Activity" className="w-full h-full object-contain" onError={(e) => {e.target.src='https://via.placeholder.com/800x600?text=Invalid+Image'}} />
                    </div>
                    {isAdmin && <EditableField label="URL รูปภาพ" value={currentPage.image} onUpdate={(v) => handleUpdate(activeTab, 'image', v)} />}
                  </div>
                  <div className="space-y-6">
                    <div className="inline-block px-3 py-1 bg-blue-500/10 text-blue-400 rounded-full text-[10px] font-black uppercase tracking-widest border border-blue-500/20">{currentPage.sub}</div>
                    <div className="text-4xl font-black text-white tracking-tighter">
                      <EditableField label="หัวข้อ" value={currentPage.name} onUpdate={(v) => handleUpdate(activeTab, 'name', v)} />
                    </div>
                    
                    <div className="space-y-4">
                      <div className="bg-white/5 p-6 rounded-2xl border border-white/5">
                         <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1">{currentPage.type === 'activity' ? 'บทบาทหน้าที่' : 'รางวัล / รายละเอียด'}</p>
                         <div className="text-xl font-bold text-white leading-relaxed">
                           <EditableField label="บทบาท/รายละเอียด" value={currentPage.type === 'activity' ? currentPage.role : currentPage.detail} onUpdate={(v) => handleUpdate(activeTab, currentPage.type === 'activity' ? 'role' : 'detail', v)} />
                         </div>
                      </div>

                      <div className="bg-white/5 p-6 rounded-2xl border border-white/5">
                         <p className="text-[10px] font-black text-blue-500 uppercase tracking-widest mb-2">คำบรรยาย 3 ภาษา (TH/CN/EN)</p>
                         <div className="text-sm text-slate-300 leading-relaxed font-medium">
                           <EditableField isArea label="คำบรรยาย 3 ภาษา" value={currentPage.desc_multilang} onUpdate={(v) => handleUpdate(activeTab, 'desc_multilang', v)} />
                         </div>
                      </div>

                      {currentPage.type === 'activity' && (
                        <div className="bg-white/5 p-6 rounded-2xl border border-white/5">
                           <p className="text-[10px] font-black text-emerald-500 uppercase tracking-widest mb-1">ผลลัพธ์ที่ภาคภูมิใจ</p>
                           <div className="text-lg font-bold text-emerald-400">
                             <EditableField label="ผลลัพธ์" value={currentPage.result} onUpdate={(v) => handleUpdate(activeTab, 'result', v)} />
                           </div>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )}

              {currentPage.type === 'closing' && (
                <div className="max-w-4xl mx-auto space-y-12 text-center">
                   <h2 className="text-7xl font-black text-white uppercase tracking-tighter">Thank You</h2>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                     <div className="bg-slate-900/60 p-10 rounded-[3rem] text-left border border-white/5 shadow-2xl">
                       <p className="text-3xl font-black text-white mb-6">ข้อมูลการติดต่อ</p>
                       <div className="flex items-center space-x-4 p-5 bg-white/5 rounded-2xl">
                          <Mail className="text-blue-500" />
                          <div>
                            <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Email</p>
                            <div className="text-white font-bold"><EditableField label="อีเมล" value={currentPage.email} onUpdate={(v) => handleUpdate(activeTab, 'email', v)} /></div>
                          </div>
                       </div>
                     </div>
                     <div className="bg-blue-600 p-10 rounded-[3rem] text-white flex flex-col items-center justify-center text-center shadow-xl">
                        <Target size={60} className="mb-6 animate-bounce" />
                        <p className="text-2xl font-black italic mb-4">"ขอโอกาสให้ผมได้เป็นส่วนหนึ่งของคณะครับ"</p>
                        <EditableField isArea label="ข้อความปิดท้าย" value={currentPage.message} onUpdate={(v) => handleUpdate(activeTab, 'message', v)} />
                     </div>
                   </div>
                </div>
              )}
            </div>
          )}
        </section>

        {/* Footer Navigation */}
        <div className="fixed bottom-8 right-8 flex items-center space-x-4 z-40">
           <button 
             disabled={activeTab === 0}
             onClick={() => setActiveTab(activeTab - 1)}
             className="w-14 h-14 bg-slate-900/80 backdrop-blur-xl border border-white/10 rounded-2xl flex items-center justify-center text-slate-500 hover:text-white disabled:opacity-20 transition-all shadow-2xl"
           >
             <ChevronLeft size={24} />
           </button>
           <button 
             disabled={activeTab === data.pages.length - 1}
             onClick={() => setActiveTab(activeTab + 1)}
             className="w-14 h-14 bg-blue-600 border border-blue-400 rounded-2xl flex items-center justify-center text-white hover:bg-blue-500 disabled:opacity-20 transition-all shadow-2xl shadow-blue-500/40"
           >
             <ChevronRight size={24} />
           </button>
        </div>
      </main>

      <style dangerouslySetInnerHTML={{ __html: `
        .custom-scrollbar::-webkit-scrollbar { width: 0px; }
        .custom-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      `}} />
    </div>
  );
}