'use client'

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

export function ProjectsView() {
  const { teams, projects, setSelectedProject, setModalType } = useAppStore()

  const openProject = (p: typeof projects[0]) => {
    setSelectedProject(p)
    setModalType('projectDetail')
  }

  const getMembers = (ids: string[]) => MEMBERS.filter(m => ids.includes(m.id))

  return (
    <div className="space-y-8 animate-fade-in">
      <div>
        <h1 className="text-xl font-bold text-gray-900">Proyek & Tim</h1>
        <p className="text-sm text-gray-400 mt-0.5">Kelola semua divisi dan proyek perusahaan</p>
      </div>

      {/* Teams */}
      <section>
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <span className="text-lg">👥</span>
            <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Divisi</h2>
            <span className="bg-gray-150 text-gray-500 text-[10px] font-semibold px-2 py-0.5 rounded-full">{teams.length}</span>
          </div>
          <button
            onClick={() => setModalType('addTeam')}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all hover:brightness-90"
            style={{ background:'#F5C542', color:'#444' }}
          >
            + Tambah Tim
          </button>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 stagger">
          {teams.map(team => {
            const members = getMembers(team.memberIds)
            return (
              <div
                key={team.id}
                className="bg-white rounded-xl p-4 shadow-sm border border-gray-150 card-hover cursor-pointer"
                style={{ borderTop: `3px solid ${team.color}` }}
                onClick={() => showToast(`👥 Membuka ${team.title}...`)}
              >
                <div className="text-sm font-semibold text-gray-900 mb-1">{team.title}</div>
                <div className="text-[11px] text-gray-400 mb-3 line-clamp-2 leading-relaxed">{team.description}</div>
                <div className="flex items-center justify-between pt-3 border-t border-gray-100">
                  <AvatarGroup members={members} max={4} size="xs" />
                  <div className="flex items-center text-[10px] text-gray-400">
                    <StatusDot active={team.status === 'active'} />
                    {team.status === 'active' ? 'Aktif' : 'Idle'}
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </section>

      {/* Projects */}
      <section>
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <span className="text-lg">📁</span>
            <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Proyek</h2>
            <span className="bg-gray-150 text-gray-500 text-[10px] font-semibold px-2 py-0.5 rounded-full">{projects.length}</span>
          </div>
          <button
            onClick={() => setModalType('addProject')}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all hover:brightness-90"
            style={{ background:'#F5C542', color:'#444' }}
          >
            + Tambah Proyek
          </button>
        </div>

        {/* Table view */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-150 overflow-hidden">
          <div className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-0 px-5 py-3 bg-gray-50 border-b border-gray-150 text-[10px] font-semibold text-gray-400 uppercase tracking-wider">
            <span>Proyek</span>
            <span>Progress</span>
            <span>Deadline</span>
            <span>Prioritas</span>
            <span>Tim</span>
          </div>
          <div className="divide-y divide-gray-50">
            {projects.map(p => {
              const members = getMembers(p.memberIds)
              const od   = isOverdue(p.deadline)
              const soon = isSoon(p.deadline)
              return (
                <div
                  key={p.id}
                  className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-0 px-5 py-4 hover:bg-gray-50 transition-colors cursor-pointer items-center"
                  onClick={() => openProject(p)}
                >
                  {/* Name */}
                  <div className="flex items-center gap-2.5">
                    <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ background: p.color }} />
                    <div>
                      <div className="text-sm font-medium text-gray-900">{p.title}</div>
                      <div className="text-[11px] text-gray-400 truncate max-w-[180px]">{p.description}</div>
                    </div>
                  </div>
                  {/* Progress */}
                  <div className="pr-4">
                    <ProgressBar value={p.progress} height={4} />
                  </div>
                  {/* Deadline */}
                  <div className={`text-xs font-medium ${od ? 'text-red-500' : soon ? 'text-orange-500' : 'text-gray-600'}`}>
                    {formatDateShort(p.deadline)}{od ? ' ⚠️' : soon ? ' ⏰' : ''}
                  </div>
                  {/* Priority */}
                  <div><PriorityBadge priority={p.priority} /></div>
                  {/* Team */}
                  <div><AvatarGroup members={members} max={3} size="xs" /></div>
                </div>
              )
            })}
          </div>
        </div>

        {/* Card grid too */}
        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mt-5 stagger">
          {projects.map(p => {
            const members = getMembers(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}` }}
                onClick={() => openProject(p)}
              >
                <div className="text-sm font-semibold text-gray-900 mb-1">{p.title}</div>
                <div className="text-[11px] text-gray-400 mb-3 line-clamp-2 leading-relaxed">{p.description}</div>
                <ProgressBar value={p.progress} height={4} />
                <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 pt-3 border-t border-gray-100">
                  <AvatarGroup members={members} max={3} size="xs" />
                  <PriorityBadge priority={p.priority} />
                </div>
              </div>
            )
          })}
        </div>
      </section>
    </div>
  )
}