import React, { useState, useRef, useEffect } from 'react';
import { 
  LayoutDashboard, 
  KanbanSquare, 
  MessageSquare, 
  Calendar, 
  Settings, 
  Bell, 
  Search, 
  Plus, 
  MoreVertical,
  Paperclip,
  Send,
  CheckCircle2,
  Clock,
  ArrowRight,
  TrendingUp,
  Users,
  CheckSquare,
  Activity,
  BarChart3,
  ListTodo,
  History,
  PieChart,
  UserCheck,
  Hash,
  Smile,
  Reply,
  Video,
  Phone,
  FileText,
  Image as ImageIcon,
  Mic,
  MicOff,
  VideoOff,
  PhoneOff,
  MonitorUp,
  Maximize,
  UserPlus,
  Copy,
  Share2,
  Mail,
  Download
} from 'lucide-react';

const INITIAL_TASKS = [
  { id: 1, title: 'Revisi Copywriting Landing Page', status: 'todo', assignee: 'Budi', priority: 'High', date: '5 Aug', comments: 3, attachments: 1 },
  { id: 2, title: 'Integrasi Payment Gateway', status: 'doing', assignee: 'Andi', priority: 'High', date: '6 Aug', comments: 8, attachments: 2 },
  { id: 3, title: 'Meeting Mingguan Tim Marketing', status: 'done', assignee: 'Siti', priority: 'Medium', date: '4 Aug', comments: 0, attachments: 0 },
  { id: 4, title: 'Setup Database Staging', status: 'todo', assignee: 'Andi', priority: 'Low', date: '8 Aug', comments: 1, attachments: 0 },
  { id: 5, title: 'Buat Aset Desain Banner', status: 'doing', assignee: 'Rina', priority: 'Medium', date: '7 Aug', comments: 2, attachments: 4 }
];

const INITIAL_MESSAGES = [
  { id: 1, sender: 'Andi (Dev)', text: 'Halo tim, API untuk payment gateway sudah siap di staging ya.', time: '09:00', isMe: false, reactions: ['🔥', '👍'] },
  { id: 2, sender: 'Siti (PM)', text: 'Mantap! @Budi tolong siapkan copy untuk email notifikasinya ya.', time: '09:05', isMe: false, reactions: [] },
  { id: 3, sender: 'Budi (Copywriter)', text: 'Siap, sedang saya kerjakan. Nanti sore saya push ke Kanban.', time: '09:10', isMe: false, reactions: ['🙌'], replyTo: 'Mantap! @Budi tolong siapkan copy untuk email notifikasinya ya.' },
  { id: 4, sender: 'Anda', text: 'Berikut draft awal untuk aset banner bulan depan. Tolong review ya tim.', time: '09:15', isMe: true, attachment: { type: 'image', name: 'draft-banner-v1.jpg', size: '2.4 MB' } }
];

// URL Web App GAS Anda
const GAS_API_URL = "https://script.google.com/macros/s/AKfycbwmvOMBpoD94LUTtW3a_WPfNtZ0lQDIGNc4arktm_XIR1JQlerbLGui-w0mio9tFcKG/exec";

export default function KerjaTimApp() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [tasks, setTasks] = useState([]);
  const [isLoadingTasks, setIsLoadingTasks] = useState(true);
  const [messages, setMessages] = useState(INITIAL_MESSAGES);
  const [newMessage, setNewMessage] = useState('');
  
  // States for Task form & filters
  const [newTaskTitle, setNewTaskTitle] = useState('');
  const [showNewTaskForm, setShowNewTaskForm] = useState(false);
  const [newTaskAssignee, setNewTaskAssignee] = useState('Anda');
  const [newTaskPriority, setNewTaskPriority] = useState('Medium');
  const [newTaskDate, setNewTaskDate] = useState('');
  const [filterAssignee, setFilterAssignee] = useState('Semua');
  const [filterPriority, setFilterPriority] = useState('Semua');
  const [draggedTaskId, setDraggedTaskId] = useState(null);

  // States for Video Call & Invites
  const [isVideoCallActive, setIsVideoCallActive] = useState(false);
  const [localStream, setLocalStream] = useState(null);
  const [isMicMuted, setIsMicMuted] = useState(false);
  const [isCameraOff, setIsCameraOff] = useState(false);
  const [hasMediaError, setHasMediaError] = useState(false);
  const videoRef = useRef(null);
  const [showInviteModal, setShowInviteModal] = useState(false);
  const [isCopied, setIsCopied] = useState(false);
  const dummyMeetingLink = "https://kerjatim.app/meet/proyek-alpha-882";

  useEffect(() => {
    fetch(GAS_API_URL)
      .then(response => response.json())
      .then(data => {
        if (Array.isArray(data)) {
          setTasks(data);
        } else {
          setTasks(INITIAL_TASKS);
        }
        setIsLoadingTasks(false);
      })
      .catch(error => {
        console.error("Gagal terhubung ke Google Sheets:", error);
        setTasks(INITIAL_TASKS);
        setIsLoadingTasks(false);
      });
  }, []);

  const startVideoCall = async () => {
    setIsVideoCallActive(true);
    setHasMediaError(false);
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      setLocalStream(stream);
      setIsMicMuted(false);
      setIsCameraOff(false);
    } catch (err) {
      console.error("Akses kamera/mic ditolak:", err);
      setHasMediaError(true);
    }
  };

  const endVideoCall = () => {
    if (localStream) localStream.getTracks().forEach(track => track.stop());
    setLocalStream(null);
    setIsVideoCallActive(false);
  };

  const toggleMic = () => {
    if (localStream) {
      localStream.getAudioTracks().forEach(track => track.enabled = !track.enabled);
      setIsMicMuted(!localStream.getAudioTracks()[0]?.enabled);
    } else {
      setIsMicMuted(!isMicMuted);
    }
  };

  const toggleCamera = () => {
    if (localStream) {
      localStream.getVideoTracks().forEach(track => track.enabled = !track.enabled);
      setIsCameraOff(!localStream.getVideoTracks()[0]?.enabled);
    } else {
      setIsCameraOff(!isCameraOff);
    }
  };

  const copyMeetingLink = async () => {
    const fallbackCopyText = (text) => {
      const textArea = document.createElement("textarea");
      textArea.value = text;
      textArea.style.position = "fixed";
      textArea.style.left = "-9999px";
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      try {
        document.execCommand('copy');
        setIsCopied(true);
        setTimeout(() => setIsCopied(false), 2000);
      } catch (err) {
        console.error('Gagal menyalin tautan (Fallback):', err);
      }
      document.body.removeChild(textArea);
    };

    try {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        await navigator.clipboard.writeText(dummyMeetingLink);
        setIsCopied(true);
        setTimeout(() => setIsCopied(false), 2000);
      } else {
        fallbackCopyText(dummyMeetingLink);
      }
    } catch (err) {
      fallbackCopyText(dummyMeetingLink);
    }
  };

  const shareViaWhatsApp = () => {
    const text = `Halo tim, mari bergabung ke rapat harian Proyek Alpha sekarang. Klik tautan berikut:\n\n${dummyMeetingLink}`;
    window.open(`https://wa.me/?text=${encodeURIComponent(text)}`, '_blank');
  };

  const shareViaEmail = () => {
    const subject = "Undangan Rapat: Daily Standup Proyek Alpha";
    const body = `Halo tim,\n\nMari bergabung ke rapat harian Proyek Alpha sekarang. Klik tautan di bawah ini untuk bergabung:\n\n${dummyMeetingLink}\n\nTerima kasih.`;
    window.open(`mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`, '_blank');
  };

  useEffect(() => {
    if (videoRef.current && localStream && !isCameraOff) {
      videoRef.current.srcObject = localStream;
    }
  }, [localStream, isVideoCallActive, isCameraOff]);

  const moveTask = (taskId, newStatus) => {
    setTasks(tasks.map(t => t.id === taskId ? { ...t, status: newStatus } : t));
  };

  const addTask = async (e) => {
    e.preventDefault();
    if (!newTaskTitle.trim()) return;
    const newTask = {
      id: Date.now(),
      title: newTaskTitle,
      status: 'todo',
      assignee: newTaskAssignee,
      priority: newTaskPriority,
      date: newTaskDate ? new Date(newTaskDate).toLocaleDateString('id-ID', {day: 'numeric', month: 'short'}) : 'Hari ini',
      comments: 0,
      attachments: 0
    };
    
    setTasks([...tasks, newTask]);
    setNewTaskTitle('');
    setNewTaskAssignee('Anda');
    setNewTaskPriority('Medium');
    setNewTaskDate('');
    setShowNewTaskForm(false);

    try {
      await fetch(GAS_API_URL, { method: 'POST', body: JSON.stringify(newTask) });
    } catch (error) {
      console.error("Gagal mengirim data ke cloud:", error);
    }
  };

  const deleteTask = (taskId) => {
    setTasks(tasks.filter(t => t.id !== taskId));
  };

  const sendMessage = (e) => {
    e.preventDefault();
    if (!newMessage.trim()) return;
    const msg = {
      id: Date.now(),
      sender: 'Anda',
      text: newMessage,
      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
      isMe: true
    };
    setMessages([...messages, msg]);
    setNewMessage('');
  };

  const handleDragStart = (e, taskId) => {
    setDraggedTaskId(taskId);
    e.dataTransfer.setData('text/plain', taskId); 
  };

  const handleDrop = (e, status) => {
    e.preventDefault();
    if (draggedTaskId) {
      moveTask(draggedTaskId, status);
      setDraggedTaskId(null);
    }
  };

  const renderSidebar = () => (
    <div className="w-64 bg-slate-900 text-slate-300 flex flex-col h-screen transition-all duration-300">
      <div className="p-6 flex items-center gap-3">
        <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center font-bold text-white">KT</div>
        <span className="text-xl font-bold text-white tracking-wide">KerjaTim</span>
      </div>
      
      <div className="px-4 py-2 text-xs font-semibold text-slate-500 uppercase tracking-wider">Menu Utama</div>
      <nav className="flex-1 px-4 space-y-2 mt-2">
        <button onClick={() => setActiveTab('dashboard')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-colors ${activeTab === 'dashboard' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20' : 'hover:bg-slate-800 hover:text-white'}`}>
          <LayoutDashboard size={20} />
          <span className="font-medium">Dasbor</span>
        </button>
        <button onClick={() => setActiveTab('kanban')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-colors ${activeTab === 'kanban' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20' : 'hover:bg-slate-800 hover:text-white'}`}>
          <KanbanSquare size={20} />
          <span className="font-medium">Papan Kanban</span>
        </button>
        <button onClick={() => setActiveTab('chat')} className={`w-full flex items-center justify-between px-4 py-3 rounded-xl transition-colors ${activeTab === 'chat' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20' : 'hover:bg-slate-800 hover:text-white'}`}>
          <div className="flex items-center gap-3">
            <MessageSquare size={20} />
            <span className="font-medium">Obrolan Tim</span>
          </div>
          <span className="bg-blue-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">3</span>
        </button>
        <button onClick={() => setActiveTab('calendar')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-colors ${activeTab === 'calendar' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20' : 'hover:bg-slate-800 hover:text-white'}`}>
          <Calendar size={20} />
          <span className="font-medium">Kalender</span>
        </button>
      </nav>
      <div className="p-4">
        <button className="w-full flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-slate-800 transition-colors text-slate-400 hover:text-white">
          <Settings size={20} />
          <span className="font-medium">Pengaturan</span>
        </button>
      </div>
    </div>
  );

  const renderHeader = () => (
    <header className="h-20 bg-white border-b border-slate-200 flex items-center justify-between px-8 z-10 shrink-0">
      <div className="flex items-center gap-4">
        <h1 className="text-2xl font-bold text-slate-800 capitalize">
          {activeTab === 'chat' ? 'Obrolan Proyek Alpha' : activeTab === 'kanban' ? 'Kanban: Proyek Alpha' : activeTab}
        </h1>
        <div className="flex -space-x-2">
          <div className="w-8 h-8 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-xs font-bold text-blue-600">A</div>
          <div className="w-8 h-8 rounded-full border-2 border-white bg-green-100 flex items-center justify-center text-xs font-bold text-green-600">S</div>
          <div className="w-8 h-8 rounded-full border-2 border-white bg-purple-100 flex items-center justify-center text-xs font-bold text-purple-600">B</div>
        </div>
      </div>
      <div className="flex items-center gap-6">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" size={18} />
          <input type="text" placeholder="Cari tugas, chat..." className="pl-10 pr-4 py-2 bg-slate-100 border-none rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-64 transition-all" />
        </div>
        <button className="relative text-slate-500 hover:text-slate-700 transition-colors">
          <Bell size={22} />
          <span className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-white"></span>
        </button>
        <div className="flex items-center gap-3 border-l border-slate-200 pl-6">
          <div className="text-right hidden md:block">
            <p className="text-sm font-bold text-slate-700">Anda</p>
            <p className="text-xs text-slate-500">Project Manager</p>
          </div>
          <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-blue-600 to-indigo-600 flex items-center justify-center text-white font-bold shadow-md">ME</div>
        </div>
      </div>
    </header>
  );

  const renderKanban = () => {
    const columns = [
      { id: 'todo', title: 'To Do (Akan Datang)' },
      { id: 'doing', title: 'Doing (Sedang Dikerjakan)' },
      { id: 'done', title: 'Done (Selesai)' }
    ];

    const filteredTasks = tasks.filter(t => {
      if (filterAssignee !== 'Semua' && t.assignee !== filterAssignee) return false;
      if (filterPriority !== 'Semua' && t.priority !== filterPriority) return false;
      return true;
    });

    return (
      <div className="p-8 h-full overflow-x-auto">
        <div className="flex justify-between items-start mb-6 shrink-0">
          <div>
            <p className="text-slate-500 mb-4">Kelola dan pantau progress pekerjaan tim Anda dengan mudah.</p>
            <div className="flex flex-wrap gap-3">
              <div className="flex items-center gap-2 bg-white px-3 py-1.5 rounded-lg border border-slate-200 shadow-sm">
                <span className="text-xs font-medium text-slate-500">Filter Anggota:</span>
                <select value={filterAssignee} onChange={(e) => setFilterAssignee(e.target.value)} className="bg-transparent text-slate-700 text-sm font-semibold focus:outline-none cursor-pointer">
                  <option value="Semua">Semua</option>
                  <option value="Anda">Anda</option>
                  <option value="Budi">Budi</option>
                  <option value="Andi">Andi</option>
                  <option value="Siti">Siti</option>
                  <option value="Rina">Rina</option>
                </select>
              </div>
              <div className="flex items-center gap-2 bg-white px-3 py-1.5 rounded-lg border border-slate-200 shadow-sm">
                <span className="text-xs font-medium text-slate-500">Prioritas:</span>
                <select value={filterPriority} onChange={(e) => setFilterPriority(e.target.value)} className="bg-transparent text-slate-700 text-sm font-semibold focus:outline-none cursor-pointer">
                  <option value="Semua">Semua</option>
                  <option value="High">Tinggi</option>
                  <option value="Medium">Sedang</option>
                  <option value="Low">Rendah</option>
                </select>
              </div>
            </div>
          </div>
          <button onClick={() => setShowNewTaskForm(true)} className="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-xl font-medium flex items-center gap-2 shadow-sm shadow-blue-600/30 transition-all active:scale-95">
            <Plus size={18} />
            Tugas Baru
          </button>
        </div>

        {showNewTaskForm && (
          <div className="mb-8 bg-white p-5 rounded-2xl shadow-sm border border-slate-200 shrink-0">
            <form onSubmit={addTask} className="flex flex-col gap-4">
              <input type="text" value={newTaskTitle} onChange={(e) => setNewTaskTitle(e.target.value)} placeholder="Judul Tugas (misal: Buat Laporan Keuangan)" className="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium text-slate-800" autoFocus />
              <div className="flex flex-wrap gap-4">
                <div className="flex-1 min-w-[150px]">
                  <label className="block text-xs font-semibold text-slate-500 mb-1">Penerima Tugas</label>
                  <select value={newTaskAssignee} onChange={(e) => setNewTaskAssignee(e.target.value)} className="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50">
                    <option value="Anda">Anda</option><option value="Budi">Budi</option><option value="Andi">Andi</option><option value="Siti">Siti</option><option value="Rina">Rina</option>
                  </select>
                </div>
                <div className="flex-1 min-w-[150px]">
                  <label className="block text-xs font-semibold text-slate-500 mb-1">Prioritas</label>
                  <select value={newTaskPriority} onChange={(e) => setNewTaskPriority(e.target.value)} className="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50">
                    <option value="High">Tinggi (High)</option><option value="Medium">Sedang (Medium)</option><option value="Low">Rendah (Low)</option>
                  </select>
                </div>
                <div className="flex-1 min-w-[150px]">
                  <label className="block text-xs font-semibold text-slate-500 mb-1">Tenggat Waktu</label>
                  <input type="date" value={newTaskDate} onChange={(e) => setNewTaskDate(e.target.value)} className="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50 text-slate-700" />
                </div>
              </div>
              <div className="flex gap-3 justify-end mt-2">
                <button type="button" onClick={() => setShowNewTaskForm(false)} className="px-6 py-2.5 rounded-xl font-medium text-slate-600 hover:bg-slate-100 transition-colors">Batal</button>
                <button type="submit" className="bg-slate-800 text-white px-6 py-2.5 rounded-xl font-medium hover:bg-slate-900 shadow-sm transition-colors">Simpan Tugas</button>
              </div>
            </form>
          </div>
        )}

        {isLoadingTasks ? (
          <div className="flex flex-col items-center justify-center h-64 min-w-[900px] bg-white rounded-2xl border-2 border-slate-200 border-dashed">
            <div className="w-10 h-10 border-4 border-slate-200 border-t-blue-600 rounded-full animate-spin mb-4"></div>
            <p className="text-slate-500 font-semibold animate-pulse">Mensinkronisasi dengan Database Google Sheets...</p>
          </div>
        ) : (
          <div className="flex gap-6 h-[calc(100%-120px)] min-w-[900px] pb-4">
            {columns.map(col => (
              <div key={col.id} className="w-80 flex-shrink-0 flex flex-col bg-slate-50/50 rounded-3xl p-4 border border-slate-100/50">
                <div className="flex justify-between items-center mb-4 px-2 shrink-0">
                  <h3 className="font-bold text-slate-800 text-sm">{col.title}</h3>
                  <span className="bg-slate-200 text-slate-600 text-xs font-bold px-2.5 py-1 rounded-full">
                    {filteredTasks.filter(t => t.status === col.id).length}
                  </span>
                </div>
                
                <div 
                  className="flex-1 overflow-y-auto space-y-4 px-1 pb-2"
                  onDragOver={(e) => e.preventDefault()}
                  onDrop={(e) => handleDrop(e, col.id)}
                >
                  {filteredTasks.filter(t => t.status === col.id).map(task => (
                    <div 
                      key={task.id}
                      draggable
                      onDragStart={(e) => handleDragStart(e, task.id)}
                      className="bg-white p-4 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-all cursor-grab active:cursor-grabbing group relative"
                    >
                      <div className="flex justify-between items-start mb-3">
                        <span className={`text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-lg ${
                          task.priority === 'High' ? 'bg-red-50 text-red-600' : 
                          task.priority === 'Medium' ? 'bg-yellow-50 text-yellow-700' : 'bg-green-50 text-green-600'
                        }`}>
                          {task.priority}
                        </span>
                        <button onClick={() => deleteTask(task.id)} className="text-slate-300 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100" title="Hapus Tugas">
                          <MoreVertical size={16} />
                        </button>
                      </div>
                      
                      <h4 className="font-semibold text-slate-800 text-sm mb-2 leading-relaxed">{task.title}</h4>
                      
                      <div className="flex items-center gap-2 text-xs text-slate-500 mb-4 font-medium">
                        <Calendar size={14} className="text-slate-400" />
                        {task.date}
                      </div>
                      
                      <div className="flex items-center justify-between mt-4 pt-4 border-t border-slate-100">
                        <div className="w-8 h-8 rounded-full bg-blue-50 border border-blue-100 flex items-center justify-center text-xs font-bold text-blue-600 shadow-sm" title={`Assignee: ${task.assignee}`}>
                          {task.assignee.charAt(0)}
                        </div>
                        <div className="flex gap-3 text-slate-400">
                          <div className="flex items-center gap-1.5 hover:text-blue-500 transition-colors">
                            <MessageSquare size={14} />
                            <span className="text-xs font-semibold">{task.comments}</span>
                          </div>
                          <div className="flex items-center gap-1.5 hover:text-blue-500 transition-colors">
                            <Paperclip size={14} />
                            <span className="text-xs font-semibold">{task.attachments}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  };

  const renderDashboard = () => {
    // Analytics Computations
    const totalTasks = tasks.length;
    const todoTasks = tasks.filter(t => t.status === 'todo').length;
    const doingTasks = tasks.filter(t => t.status === 'doing').length;
    const doneTasks = tasks.filter(t => t.status === 'done').length;
    
    const todoPercent = totalTasks === 0 ? 0 : Math.round((todoTasks / totalTasks) * 100);
    const doingPercent = totalTasks === 0 ? 0 : Math.round((doingTasks / totalTasks) * 100);
    const donePercent = totalTasks === 0 ? 0 : Math.round((doneTasks / totalTasks) * 100);
    const progressPercent = totalTasks === 0 ? 0 : Math.round((doneTasks / totalTasks) * 100);

    const highCount = tasks.filter(t => t.priority === 'High').length;
    const medCount = tasks.filter(t => t.priority === 'Medium').length;
    const lowCount = tasks.filter(t => t.priority === 'Low').length;
    
    const highPct = totalTasks === 0 ? 0 : Math.round((highCount / totalTasks) * 100);
    const medPct = totalTasks === 0 ? 0 : Math.round((medCount / totalTasks) * 100);
    const lowPct = totalTasks === 0 ? 0 : Math.round((lowCount / totalTasks) * 100);

    // Workload computation
    const assigneeMap = {};
    tasks.filter(t => t.status !== 'done').forEach(t => {
      assigneeMap[t.assignee] = (assigneeMap[t.assignee] || 0) + 1;
    });
    
    const workloadData = Object.keys(assigneeMap).map(name => ({
      name, count: assigneeMap[name]
    })).sort((a, b) => b.count - a.count);
    
    const maxWorkload = workloadData.length > 0 ? Math.max(...workloadData.map(d => d.count)) : 1;

    const chartData = [
      { day: 'Sen', tasks: 4 }, { day: 'Sel', tasks: 6 },
      { day: 'Rab', tasks: 3 }, { day: 'Kam', tasks: 8 },
      { day: 'Jum', tasks: 5 }
    ];
    const maxChartTasks = 8;

    return (
      <div className="p-8 h-full overflow-y-auto">
        <h2 className="text-2xl font-bold text-slate-800 mb-6">Ringkasan Proyek</h2>
        
        {/* KPI Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8 shrink-0">
          <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
            <div className="flex justify-between items-start mb-4">
              <div className="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center"><ListTodo size={24} /></div>
              <span className="text-xs font-bold text-slate-400 bg-slate-100 px-2 py-1 rounded-lg">Total</span>
            </div>
            <h3 className="text-3xl font-black text-slate-800 mb-1">{totalTasks}</h3>
            <p className="text-sm text-slate-500 font-medium">Tugas Keseluruhan</p>
          </div>
          <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
            <div className="flex justify-between items-start mb-4">
              <div className="w-12 h-12 rounded-xl bg-yellow-50 text-yellow-600 flex items-center justify-center"><Activity size={24} /></div>
              <span className="text-xs font-bold text-slate-400 bg-slate-100 px-2 py-1 rounded-lg">Aktif</span>
            </div>
            <h3 className="text-3xl font-black text-slate-800 mb-1">{doingTasks}</h3>
            <p className="text-sm text-slate-500 font-medium">Sedang Dikerjakan</p>
          </div>
          <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
            <div className="flex justify-between items-start mb-4">
              <div className="w-12 h-12 rounded-xl bg-green-50 text-green-600 flex items-center justify-center"><CheckSquare size={24} /></div>
              <span className="text-xs font-bold text-green-600 bg-green-100 px-2 py-1 rounded-lg">Selesai</span>
            </div>
            <h3 className="text-3xl font-black text-slate-800 mb-1">{doneTasks}</h3>
            <p className="text-sm text-slate-500 font-medium">Tugas Diselesaikan</p>
          </div>
          <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
            <div className="flex justify-between items-start mb-4">
              <div className="w-12 h-12 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center"><TrendingUp size={24} /></div>
              <span className="text-xs font-bold text-blue-600 bg-blue-100 px-2 py-1 rounded-lg">Progress</span>
            </div>
            <h3 className="text-3xl font-black text-slate-800 mb-1">{progressPercent}%</h3>
            <p className="text-sm text-slate-500 font-medium">Penyelesaian Proyek</p>
          </div>
        </div>

        {/* Charts Section */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8 shrink-0">
          <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm lg:col-span-2">
            <h3 className="font-bold text-slate-800 mb-6 flex items-center gap-2">
              <BarChart3 size={18} className="text-slate-400"/>
              Produktivitas Mingguan
            </h3>
            <div className="h-48 flex items-end justify-between gap-2 px-2 mt-4">
              {chartData.map((data, idx) => (
                <div key={idx} className="flex flex-col items-center flex-1 group">
                  <div className="w-full relative flex flex-col justify-end items-center h-full">
                    <div className="opacity-0 group-hover:opacity-100 absolute -top-8 bg-slate-800 text-white text-xs font-bold px-2 py-1 rounded-md transition-opacity">
                      {data.tasks} tugas
                    </div>
                    <div className="w-full bg-blue-500 rounded-t-lg shadow-sm transition-all duration-1000 ease-out group-hover:bg-blue-600 cursor-pointer" style={{ height: `${(data.tasks / maxChartTasks) * 100}%` }}></div>
                  </div>
                  <span className="text-xs text-slate-400 font-medium mt-3">{data.day}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
            <h3 className="font-bold text-slate-800 mb-6 flex items-center gap-2">
              <Activity size={18} className="text-slate-400"/>
              Distribusi Status Tugas
            </h3>
            <div className="space-y-6">
              <div>
                <div className="flex justify-between items-center mb-2">
                  <span className="text-sm font-medium text-slate-600 flex items-center gap-2"><div className="w-2.5 h-2.5 rounded-full bg-slate-300"></div> To Do</span>
                  <span className="text-sm font-bold text-slate-800">{todoTasks}</span>
                </div>
                <div className="w-full bg-slate-100 h-2.5 rounded-full overflow-hidden">
                  <div className="bg-slate-400 h-full rounded-full transition-all duration-1000" style={{ width: `${todoPercent}%` }}></div>
                </div>
              </div>
              <div>
                <div className="flex justify-between items-center mb-2">
                  <span className="text-sm font-medium text-slate-600 flex items-center gap-2"><div className="w-2.5 h-2.5 rounded-full bg-yellow-400"></div> Doing</span>
                  <span className="text-sm font-bold text-slate-800">{doingTasks}</span>
                </div>
                <div className="w-full bg-slate-100 h-2.5 rounded-full overflow-hidden">
                  <div className="bg-yellow-400 h-full rounded-full transition-all duration-1000" style={{ width: `${doingPercent}%` }}></div>
                </div>
              </div>
              <div>
                <div className="flex justify-between items-center mb-2">
                  <span className="text-sm font-medium text-slate-600 flex items-center gap-2"><div className="w-2.5 h-2.5 rounded-full bg-green-500"></div> Done</span>
                  <span className="text-sm font-bold text-slate-800">{doneTasks}</span>
                </div>
                <div className="w-full bg-slate-100 h-2.5 rounded-full overflow-hidden">
                  <div className="bg-green-500 h-full rounded-full transition-all duration-1000" style={{ width: `${donePercent}%` }}></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Extended Analytics */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8 shrink-0">
          <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm lg:col-span-2">
            <h3 className="font-bold text-slate-800 mb-6 flex items-center gap-2"><UserCheck size={18} className="text-slate-400"/>Beban Kerja Anggota (Tugas Aktif)</h3>
            <div className="space-y-5">
              {workloadData.length > 0 ? workloadData.map((data, index) => (
                <div key={index} className="flex items-center gap-4">
                  <div className="w-8 h-8 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center text-xs font-bold text-slate-600 shadow-sm shrink-0">{data.name.charAt(0)}</div>
                  <div className="flex-1">
                    <div className="flex justify-between items-center mb-1">
                      <span className="text-sm font-semibold text-slate-700">{data.name}</span>
                      <span className="text-xs font-bold text-slate-500">{data.count} Tugas</span>
                    </div>
                    <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
                      <div className="bg-indigo-500 h-full rounded-full transition-all" style={{ width: `${(data.count / maxWorkload) * 100}%` }}></div>
                    </div>
                  </div>
                </div>
              )) : (
                <div className="text-center py-6 text-slate-500 text-sm font-medium">Semua anggota tim sedang tidak ada tugas aktif.</div>
              )}
            </div>
          </div>

          <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col">
            <h3 className="font-bold text-slate-800 mb-6 flex items-center gap-2"><PieChart size={18} className="text-slate-400"/>Tingkat Prioritas</h3>
            <div className="flex-1 flex flex-col items-center justify-center">
              <div className="relative w-32 h-32 rounded-full flex items-center justify-center mb-6 shadow-sm"
                   style={{ background: `conic-gradient(#ef4444 0% ${highPct}%, #eab308 ${highPct}% ${highPct + medPct}%, #22c55e ${highPct + medPct}% 100%)` }}>
                <div className="absolute inset-0 m-auto w-20 h-20 bg-white rounded-full flex flex-col items-center justify-center shadow-inner">
                  <span className="text-2xl font-bold text-slate-800">{totalTasks}</span>
                  <span className="text-[10px] text-slate-400 font-medium">Total</span>
                </div>
              </div>
              <div className="w-full space-y-3 px-2">
                <div className="flex justify-between items-center">
                  <span className="text-sm font-medium text-slate-600 flex items-center gap-2"><span className="w-3 h-3 rounded-md bg-red-500"></span> Tinggi</span>
                  <span className="text-sm font-bold text-slate-800">{highCount} <span className="text-xs text-slate-400 font-normal ml-1">({highPct}%)</span></span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm font-medium text-slate-600 flex items-center gap-2"><span className="w-3 h-3 rounded-md bg-yellow-500"></span> Sedang</span>
                  <span className="text-sm font-bold text-slate-800">{medCount} <span className="text-xs text-slate-400 font-normal ml-1">({medPct}%)</span></span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm font-medium text-slate-600 flex items-center gap-2"><span className="w-3 h-3 rounded-md bg-green-500"></span> Rendah</span>
                  <span className="text-sm font-bold text-slate-800">{lowCount} <span className="text-xs text-slate-400 font-normal ml-1">({lowPct}%)</span></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };

  const renderChat = () => (
    <div className="flex h-full bg-white relative">
      <div className="flex-1 flex flex-col h-full bg-slate-50">
        <div className="px-6 py-4 bg-white/80 backdrop-blur-md border-b border-slate-200 flex justify-between items-center shadow-sm z-10 shrink-0">
          <div>
            <h3 className="font-bold text-slate-800">Obrolan Tim Umum</h3>
            <p className="text-xs text-slate-500 font-medium">4 Anggota • Online</p>
          </div>
          <div className="flex gap-2">
            <button onClick={startVideoCall} className="p-2 text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors shadow-sm shadow-blue-600/30 flex items-center gap-2 px-4"><Video size={18}/><span className="text-sm font-semibold hidden sm:inline">Mulai Rapat</span></button>
            <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-colors"><MoreVertical size={20}/></button>
          </div>
        </div>

        <div className="flex-1 overflow-y-auto p-6 space-y-6">
          {messages.map(msg => (
            <div key={msg.id} className={`flex ${msg.isMe ? 'justify-end' : 'justify-start'} group`}>
              {!msg.isMe && (
                <div className="w-8 h-8 rounded-full bg-slate-200 mr-3 flex-shrink-0 flex items-center justify-center text-xs font-bold text-slate-600 border-2 border-white" title={msg.sender}>
                  {msg.sender.charAt(0)}
                </div>
              )}
              <div className={`max-w-[70%] ${msg.isMe ? 'order-1' : 'order-2'}`}>
                {!msg.isMe && <p className="text-xs text-slate-500 mb-1 ml-1 font-semibold">{msg.sender} <span className="font-normal text-slate-400 ml-1">{msg.time}</span></p>}
                
                <div className={`p-4 rounded-2xl relative shadow-sm ${msg.isMe ? 'bg-blue-600 text-white rounded-tr-sm' : 'bg-white border border-slate-200 text-slate-700 rounded-tl-sm'}`}>
                  {msg.replyTo && (
                    <div className={`text-xs pl-3 py-1.5 mb-2 border-l-2 rounded-r-md ${msg.isMe ? 'border-blue-300 bg-blue-700/50 text-blue-100' : 'border-slate-300 bg-slate-100 text-slate-500'} italic`}>
                      <span className="font-semibold flex items-center gap-1 mb-0.5"><Reply size={12}/> Membalas</span>
                      "{msg.replyTo.substring(0, 30)}..."
                    </div>
                  )}
                  {msg.attachment && (
                    <div className="mb-3 bg-slate-50/20 rounded-xl overflow-hidden border border-white/20">
                      {msg.attachment.type === 'image' && (
                        <div className="relative group/img cursor-pointer">
                          <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=400&auto=format&fit=crop" alt={msg.attachment.name} className="w-full h-40 object-cover" />
                        </div>
                      )}
                      <div className="p-3 flex items-center gap-3">
                        <div className={`p-2 rounded-lg ${msg.isMe ? 'bg-blue-700 text-white' : 'bg-slate-100 text-slate-500'}`}>
                          {msg.attachment.type === 'image' ? <ImageIcon size={20}/> : <FileText size={20}/>}
                        </div>
                        <div className="flex-1 overflow-hidden">
                          <p className={`text-sm font-semibold truncate ${msg.isMe ? 'text-white' : 'text-slate-700'}`}>{msg.attachment.name}</p>
                          <p className={`text-xs ${msg.isMe ? 'text-blue-200' : 'text-slate-400'}`}>{msg.attachment.size}</p>
                        </div>
                      </div>
                    </div>
                  )}
                  <p className="text-sm leading-relaxed whitespace-pre-wrap">{msg.text}</p>
                  
                  {msg.reactions && msg.reactions.length > 0 && (
                    <div className={`absolute -bottom-3 ${msg.isMe ? 'right-4' : 'left-4'} flex gap-1 bg-white border border-slate-200 p-1 rounded-full shadow-sm`}>
                      {msg.reactions.map((emoji, i) => <span key={i} className="text-xs bg-slate-100 rounded-full w-5 h-5 flex items-center justify-center">{emoji}</span>)}
                    </div>
                  )}
                </div>
                {msg.isMe && <p className="text-xs text-slate-400 mt-1 text-right font-medium">{msg.time}</p>}
              </div>
            </div>
          ))}
        </div>

        <div className="p-4 bg-white border-t border-slate-200 shrink-0 z-10">
          <form onSubmit={sendMessage} className="flex items-end gap-3 max-w-4xl mx-auto">
            <div className="flex gap-1 shrink-0">
              <button type="button" className="p-2.5 text-slate-400 hover:bg-slate-100 rounded-xl"><Paperclip size={20} /></button>
            </div>
            <div className="flex-1 bg-slate-50 border border-slate-200 rounded-2xl overflow-hidden focus-within:ring-2 focus-within:ring-blue-500">
              <textarea 
                value={newMessage}
                onChange={(e) => setNewMessage(e.target.value)}
                onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(e); } }}
                placeholder="Ketik pesan untuk tim..." 
                className="w-full px-4 py-3 bg-transparent border-none focus:outline-none text-sm resize-none h-[50px] max-h-32 text-slate-700"
                rows={1}
              />
            </div>
            <button type="submit" disabled={!newMessage.trim()} className="p-3.5 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 text-white rounded-xl shadow-sm"><Send size={20} /></button>
          </form>
        </div>
      </div>
    </div>
  );

  const renderPlaceholder = (title, desc) => (
    <div className="flex flex-col items-center justify-center h-full text-slate-400">
      <LayoutDashboard size={64} className="mb-4 text-slate-300" strokeWidth={1} />
      <h2 className="text-xl font-bold text-slate-700 mb-2">{title}</h2>
      <p className="text-sm">{desc}</p>
    </div>
  );

  const renderVideoCall = () => (
    <div className="fixed inset-0 bg-slate-950 z-[100] flex flex-col transition-all duration-300">
      <div className="h-16 px-6 flex items-center justify-between text-white border-b border-slate-800 shrink-0 bg-slate-900/50 backdrop-blur-md">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <div className="w-2.5 h-2.5 bg-red-500 rounded-full animate-pulse"></div>
            <span className="font-semibold tracking-wide">00:14:23</span>
          </div>
          <div className="w-px h-6 bg-slate-700 mx-2"></div>
          <h2 className="font-bold text-lg">Daily Standup: Proyek Alpha</h2>
        </div>
        <div className="flex items-center gap-3">
          <button onClick={() => setShowInviteModal(true)} className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg"><UserPlus size={16} />Undang Tim</button>
        </div>
      </div>

      <div className="flex-1 p-6 grid grid-cols-1 lg:grid-cols-3 gap-6 overflow-hidden bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-slate-800 to-slate-950">
        <div className="lg:col-span-2 grid grid-cols-2 gap-4 h-full">
          <div className="bg-slate-800 rounded-2xl overflow-hidden relative border border-slate-700 shadow-xl">
             <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=600&auto=format&fit=crop" alt="Siti" className="w-full h-full object-cover opacity-80" />
             <div className="absolute bottom-4 left-4 bg-slate-900/70 backdrop-blur-md px-3 py-1.5 rounded-lg flex items-center gap-2">
               <span className="text-white text-sm font-medium">Siti (PM)</span>
             </div>
          </div>
          <div className="bg-slate-800 rounded-2xl overflow-hidden relative border border-slate-700 shadow-xl flex items-center justify-center">
             <div className="w-24 h-24 rounded-full bg-blue-600 flex items-center justify-center text-4xl font-bold text-white shadow-lg">B</div>
             <div className="absolute bottom-4 left-4 bg-slate-900/70 backdrop-blur-md px-3 py-1.5 rounded-lg flex items-center gap-2">
               <MicOff size={14} className="text-red-400"/><span className="text-white text-sm font-medium">Budi (Copywriter)</span>
             </div>
          </div>
        </div>

        <div className="bg-slate-800 rounded-2xl overflow-hidden relative border border-slate-600 shadow-2xl flex items-center justify-center">
          {hasMediaError || isCameraOff ? (
            <div className="w-32 h-32 rounded-full bg-gradient-to-tr from-indigo-500 to-purple-600 flex items-center justify-center text-5xl font-bold text-white shadow-xl">ME</div>
          ) : (
            <video ref={videoRef} autoPlay playsInline muted={true} className="w-full h-full object-cover transform -scale-x-100" />
          )}
          <div className="absolute bottom-4 left-4 bg-slate-900/80 backdrop-blur-md px-4 py-2 rounded-xl flex items-center gap-2 border border-slate-700">
             {isMicMuted ? <MicOff size={16} className="text-red-500"/> : <div className="w-2 h-2 rounded-full bg-green-500 animate-bounce"></div>}
             <span className="text-white text-sm font-bold">Anda</span>
          </div>
        </div>
      </div>

      <div className="h-24 bg-slate-900 border-t border-slate-800 shrink-0 flex items-center justify-center gap-4 px-6 pb-2">
        <button onClick={toggleMic} className={`flex flex-col items-center justify-center w-14 h-14 rounded-full transition-all ${isMicMuted ? 'bg-red-500/20 text-red-500' : 'bg-slate-700 text-white'}`}>{isMicMuted ? <MicOff size={22}/> : <Mic size={22}/>}</button>
        <button onClick={toggleCamera} className={`flex flex-col items-center justify-center w-14 h-14 rounded-full transition-all ${isCameraOff ? 'bg-red-500/20 text-red-500' : 'bg-slate-700 text-white'}`}>{isCameraOff ? <VideoOff size={22}/> : <Video size={22}/>}</button>
        <div className="w-px h-8 bg-slate-700 mx-2"></div>
        <button onClick={endVideoCall} className="flex items-center gap-2 px-6 h-14 rounded-full bg-red-600 hover:bg-red-700 text-white font-bold transition-all shadow-lg"><PhoneOff size={20}/>Akhiri Panggilan</button>
      </div>

      {showInviteModal && (
        <div className="absolute inset-0 bg-slate-950/60 backdrop-blur-sm z-[200] flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-200">
            <div className="flex justify-between items-center p-5 border-b border-slate-100">
              <h3 className="font-bold text-lg text-slate-800 flex items-center gap-2"><Share2 size={20} className="text-blue-600" />Undang Anggota</h3>
              <button onClick={() => setShowInviteModal(false)} className="text-slate-400 hover:text-slate-600 hover:bg-slate-100 p-1.5 rounded-lg"><span className="text-xs font-bold px-2">Tutup</span></button>
            </div>
            <div className="p-6">
              <p className="text-sm text-slate-600 mb-4">Bagikan tautan ini kepada anggota tim.</p>
              <div className="flex items-center gap-2 mb-6">
                <div className="flex-1 bg-slate-100 border border-slate-200 rounded-xl px-4 py-3 text-sm text-slate-600 truncate font-mono">{dummyMeetingLink}</div>
                <button onClick={copyMeetingLink} className={`flex items-center justify-center w-12 h-12 rounded-xl shrink-0 ${isCopied ? 'bg-green-100 text-green-600' : 'bg-blue-50 text-blue-600'}`}>{isCopied ? <CheckCircle2 size={20} /> : <Copy size={20} />}</button>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <button onClick={shareViaWhatsApp} className="flex items-center justify-center gap-2 py-3 rounded-xl font-semibold text-sm border border-green-500 text-green-600">WhatsApp</button>
                <button onClick={shareViaEmail} className="flex items-center justify-center gap-2 py-3 rounded-xl font-semibold text-sm border border-slate-300 text-slate-700"><Mail size={18} />Email</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );

  return (
    <div className="flex h-screen bg-white font-sans text-slate-800 overflow-hidden relative">
      {renderSidebar()}
      <div className="flex-1 flex flex-col relative overflow-hidden">
        {renderHeader()}
        <main className="flex-1 overflow-hidden bg-slate-50/50">
          {activeTab === 'kanban' && renderKanban()}
          {activeTab === 'chat' && renderChat()}
          {activeTab === 'dashboard' && renderDashboard()}
          {activeTab === 'calendar' && renderPlaceholder('Kalender Bersama', 'Sinkronisasi jadwal meeting dan tenggat waktu tim.')}
        </main>
      </div>
      {isVideoCallActive && renderVideoCall()}
    </div>
  );
}