'use client'

import { useAppStore } from '@/store'
import { progressColor, formatDateShort, isOverdue, isSoon } from '@/lib/utils'
import { AvatarGroup } from '@/components/ui/Avatar'
import { ProgressBar } from '@/components/ui/ProgressBar'
import { PriorityBadge } from '@/components/ui/Badge'
import { MEMBERS } from '@/lib/data'

function StatCard({ icon, value, label, change, changeUp, bg }: {
  icon: string; value: string | number; label: string; change: string; changeUp: boolean; bg: string
}) {
  return (
    <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-150 animate-fade-in">
      <div className="w-10 h-10 rounded-xl flex items-center justify-center text-lg mb-3" style={{ background: bg }}>
        {icon}
      </div>
      <div className="text-3xl font-bold text-gray-900 leading-none">{value}</div>
      <div className="text-xs text-gray-400 mt-1.5">{label}</div>
      <div className={`text-xs mt-2 flex items-center gap-1 font-medium ${changeUp ? 'text-green-500' : 'text-red-500'}`}>
        {changeUp ? '↑' : '↓'} {change}
      </div>
    </div>
  )
}

function BarChart({ data }: { data: { name: string; value: number; color: string }[] }) {
  const max = Math.max(...data.map(d => d.value))
  return (
    <div className="flex items-end gap-2 h-24">
      {data.map((d, i) => (
        <div key={i} className="flex flex-col items-center gap-1 flex-1">
          <span className="text-[10px] font-semibold" style={{ color: d.color }}>{d.value}%</span>
          <div
            className="w-full rounded-t-md bar-animate cursor-pointer hover:brightness-90 transition-all"
            style={{
              height: `${(d.value / max) * 80}px`,
              background: d.color,
              animationDelay: `${i * 80}ms`,
            }}
            title={`${d.name}: ${d.value}%`}
          />
          <span className="text-[9px] text-gray-400 text-center leading-tight">{d.name.split(' ')[0]}</span>
        </div>
      ))}
    </div>
  )
}

function WeeklyChart() {
  const days = ['Sen','Sel','Rab','Kam','Jum','Sab','Min']
  const vals = [6, 8, 5, 9, 7, 4, 3]
  const max = Math.max(...vals)
  return (
    <div className="flex items-end gap-1.5 h-20">
      {days.map((d, i) => (
        <div key={d} className="flex flex-col items-center gap-1 flex-1">
          <div
            className="w-full rounded-t-md bar-animate"
            style={{
              height: `${(vals[i] / max) * 64}px`,
              background: i === 3 ? '#F5C542' : '#E0E0E0',
              animationDelay: `${i * 60}ms`,
            }}
          />
          <span className="text-[9px] text-gray-400">{d}</span>
        </div>
      ))}
    </div>
  )
}

export function Dashboard() {
  const { tasks, columns, projects } = useAppStore()

  const totalTasks = tasks.length
  const doneTasks = columns.find(c => c.id === 'done')?.taskIds.length ?? 0
  const overdueTasks = tasks.filter(t => t.status !== 'done' && isOverdue(t.dueDate)).length
  const productivity = totalTasks ? Math.round((doneTasks / totalTasks) * 100) : 0

  const getMembersForProject = (memberIds: string[]) =>
    MEMBERS.filter(m => memberIds.includes(m.id))

  return (
    <div className="space-y-6 animate-fade-in">
      {/* Greeting */}
      <div>
        <h1 className="text-xl font-bold text-gray-900">Dashboard Utama 👋</h1>
        <p className="text-sm text-gray-400 mt-0.5">Selamat datang kembali, Admin. Berikut ringkasan aktivitas hari ini.</p>
      </div>

      {/* Stat Cards */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 stagger">
        <StatCard icon="📋" value={totalTasks} label="Total Tugas" change="8% minggu ini" changeUp bg="#FFF8DC" />
        <StatCard icon="✅" value={doneTasks}  label="Tugas Selesai" change="12% vs bulan lalu" changeUp bg="#F0FDF4" />
        <StatCard icon="⚠️" value={overdueTasks} label="Terlambat" change="2 tugas baru" changeUp={false} bg="#FEF2F2" />
        <StatCard icon="📈" value={`${productivity}%`} label="Produktivitas Tim" change="5% minggu ini" changeUp bg="#EEF2FF" />
      </div>

      {/* Charts row */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {/* Project Progress Bar Chart */}
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-150">
          <h3 className="text-sm font-semibold text-gray-800 mb-4">Progress Proyek</h3>
          <BarChart
            data={projects.map(p => ({ name: p.title, value: p.progress, color: progressColor(p.progress) }))}
          />
        </div>

        {/* Weekly Activity */}
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-150">
          <h3 className="text-sm font-semibold text-gray-800 mb-1">Aktivitas Minggu Ini</h3>
          <p className="text-[11px] text-gray-400 mb-4">Jumlah tugas diselesaikan per hari</p>
          <WeeklyChart />
        </div>
      </div>

      {/* Kanban Distribution */}
      <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-150">
        <h3 className="text-sm font-semibold text-gray-800 mb-4">Distribusi Tugas per Kolom</h3>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
          {columns.map(col => (
            <div key={col.id} className="bg-gray-50 rounded-xl p-4 border border-gray-150">
              <div className="flex items-center gap-1.5 mb-2">
                <span className="w-2 h-2 rounded-full" style={{ background: col.color }} />
                <span className="text-[10px] font-semibold uppercase tracking-wide" style={{ color: col.color }}>
                  {col.title}
                </span>
              </div>
              <div className="text-2xl font-bold text-gray-900">{col.taskIds.length}</div>
              <div className="text-[11px] text-gray-400 mt-0.5">tugas</div>
            </div>
          ))}
        </div>
      </div>

      {/* Active Projects */}
      <div>
        <h3 className="text-sm font-semibold text-gray-800 mb-3">Proyek Aktif</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 stagger">
          {projects.map(p => {
            const members = getMembersForProject(p.memberIds)
            const od = isOverdue(p.deadline)
            const soon = isSoon(p.deadline)
            return (
              <div
                key={p.id}
                className="bg-white rounded-xl p-4 shadow-sm border border-gray-150 card-hover cursor-pointer"
                style={{ borderTop: `3px solid ${p.color}` }}
              >
                <div className="text-xs font-semibold text-gray-900 mb-1 truncate">{p.title}</div>
                <div className="text-[11px] text-gray-400 mb-3 line-clamp-2 leading-relaxed">{p.description}</div>
                <ProgressBar value={p.progress} />
                <div className={`text-[11px] mt-2 flex items-center gap-1 ${od ? 'text-red-500' : soon ? 'text-orange-500' : 'text-gray-400'}`}>
                  📅 {formatDateShort(p.deadline)}{od ? ' ⚠️ Terlambat' : soon ? ' ⏰ Segera!' : ''}
                </div>
                <div className="flex items-center justify-between mt-3">
                  <AvatarGroup members={members} max={3} size="xs" />
                  <PriorityBadge priority={p.priority} />
                </div>
              </div>
            )
          })}
        </div>
      </div>

      {/* Recent Tasks */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-150 overflow-hidden">
        <div className="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
          <h3 className="text-sm font-semibold text-gray-800">Tugas Terbaru</h3>
          <span className="text-[11px] text-gray-400">{tasks.length} total</span>
        </div>
        <div className="divide-y divide-gray-50">
          {tasks.slice(0, 6).map(task => {
            const members = MEMBERS.filter(m => task.assigneeIds.includes(m.id))
            const od = task.status !== 'done' && isOverdue(task.dueDate)
            return (
              <div key={task.id} className="px-5 py-3 flex items-center gap-3 hover:bg-gray-50 transition-colors">
                <span className="text-base">{task.status === 'done' ? '✅' : od ? '⚠️' : '📋'}</span>
                <div className="flex-1 min-w-0">
                  <div className={`text-sm font-medium truncate ${task.status === 'done' ? 'line-through text-gray-400' : 'text-gray-800'}`}>
                    {task.title}
                  </div>
                  <div className={`text-[11px] mt-0.5 ${od ? 'text-red-500' : 'text-gray-400'}`}>
                    📅 {formatDateShort(task.dueDate)}{od ? ' — Terlambat!' : ''}
                  </div>
                </div>
                <PriorityBadge priority={task.priority} />
                <AvatarGroup members={members} max={2} size="xs" />
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}