'use client'

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

function getMembers(ids: string[]) {
  return MEMBERS.filter(m => ids.includes(m.id))
}

/* ── HQ Card ── */
function HQCard({ ws }: { ws: Workspace }) {
  return (
    <div
      className="bg-white rounded-xl p-4 w-52 shadow-sm border border-gray-150 card-hover cursor-pointer flex-shrink-0"
      style={{ borderTop: `3px solid ${ws.color}` }}
      onClick={() => showToast(`🏢 Membuka ${ws.title}...`)}
    >
      <TypeBadge type="hq" />
      <div className="mt-2 text-sm font-semibold text-gray-900 truncate">{ws.title}</div>
      <div className="text-[11px] text-gray-400 mt-1 leading-relaxed line-clamp-2">{ws.description}</div>
      <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
        <AvatarGroup members={getMembers(ws.memberIds)} max={4} size="xs" />
        <span className="text-[10px] text-gray-400">{ws.memberIds.length} anggota</span>
      </div>
    </div>
  )
}

/* ── Team Card ── */
function TeamCard({ team }: { team: Team }) {
  return (
    <div
      className="bg-white rounded-xl p-4 w-52 shadow-sm border border-gray-150 card-hover cursor-pointer flex-shrink-0"
      style={{ borderTop: `3px solid ${team.color}` }}
      onClick={() => showToast(`👥 Membuka ${team.title}...`)}
    >
      <TypeBadge type="team" />
      <div className="mt-2 text-sm font-semibold text-gray-900 truncate">{team.title}</div>
      <div className="text-[11px] text-gray-400 mt-1 leading-relaxed line-clamp-2">{team.description}</div>
      <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
        <AvatarGroup members={getMembers(team.memberIds)} 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>
  )
}

/* ── Project Card ── */
function ProjectCard({ project }: { project: Project }) {
  const { setSelectedProject, setModalType } = useAppStore()
  const od   = isOverdue(project.deadline)
  const soon = isSoon(project.deadline)

  const open = () => {
    setSelectedProject(project)
    setModalType('projectDetail')
  }

  return (
    <div
      className="bg-white rounded-xl p-4 w-52 shadow-sm border border-gray-150 card-hover cursor-pointer flex-shrink-0"
      style={{ borderTop: `3px solid ${project.color}` }}
      onClick={open}
    >
      <TypeBadge type="project" />
      <div className="mt-2 text-sm font-semibold text-gray-900 truncate">{project.title}</div>
      <div className="text-[11px] text-gray-400 mt-1 leading-relaxed line-clamp-2">{project.description}</div>
      <div className="mt-3">
        <ProgressBar value={project.progress} height={4} />
      </div>
      <div className={`text-[11px] mt-2 flex items-center gap-1 ${od ? 'text-red-500' : soon ? 'text-orange-500' : 'text-gray-400'}`}>
        📅 {formatDateShort(project.deadline)}{od ? ' ⚠️' : soon ? ' ⏰' : ''}
      </div>
      <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
        <AvatarGroup members={getMembers(project.memberIds)} max={3} size="xs" />
        <PriorityBadge priority={project.priority} />
      </div>
    </div>
  )
}

/* ── Add Button ── */
function AddCard({ label, onClick }: { label: string; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className="w-52 min-h-[148px] border-2 border-dashed border-gray-200 rounded-xl flex flex-col items-center justify-center gap-2
                 text-gray-400 hover:border-gold-400 hover:text-gold-600 hover:bg-gold-50 transition-all flex-shrink-0 group"
    >
      <div className="w-9 h-9 rounded-full flex items-center justify-center text-white text-xl font-light
                      bg-gold-400 group-hover:bg-gold-500 transition-all group-hover:rotate-90"
        style={{ background:'#F5C542' }}
      >
        +
      </div>
      <span className="text-xs font-medium">{label}</span>
    </button>
  )
}

/* ── Connector ── */
function Connector() {
  return (
    <div className="my-1 ml-8 relative">
      <div className="w-0.5 h-8 bg-gradient-to-b from-gray-200 to-gold-400 relative"
        style={{ background: 'linear-gradient(to bottom, #E0E0E0, #F5C542)' }}
      >
        <div className="absolute -bottom-1 -left-1 w-2.5 h-2.5 border-r-2 border-b-2 rotate-45"
          style={{ borderColor:'#F5C542' }}
        />
      </div>
    </div>
  )
}

/* ── Section Header ── */
function SectionHeader({ icon, title, count }: { icon: string; title: string; count: number }) {
  return (
    <div className="flex items-center gap-2 mb-4">
      <span className="text-xl">{icon}</span>
      <span className="text-xs font-semibold uppercase tracking-widest text-gray-400">{title}</span>
      <span className="bg-gray-150 text-gray-500 text-[10px] font-semibold px-2 py-0.5 rounded-full">
        {count}
      </span>
    </div>
  )
}

/* ── Main Export ── */
export function WorkspaceView() {
  const { workspaces, teams, projects, setModalType } = useAppStore()

  return (
    <div className="space-y-2 animate-fade-in">
      <div className="mb-5">
        <h1 className="text-xl font-bold text-gray-900">Workspace Organisasi</h1>
        <p className="text-sm text-gray-400 mt-0.5">Struktur hierarki perusahaan: HQ → Tim → Proyek</p>
      </div>

      {/* HQ */}
      <section>
        <SectionHeader icon="🏢" title="Headquarter (HQ)" count={workspaces.length} />
        <div className="flex flex-wrap gap-4 stagger">
          {workspaces.map(ws => <HQCard key={ws.id} ws={ws} />)}
          <AddCard label="Tambah Workspace" onClick={() => setModalType('addWorkspace')} />
        </div>
      </section>

      <Connector />

      {/* Teams */}
      <section>
        <SectionHeader icon="👥" title="Tim & Divisi" count={teams.length} />
        <div className="flex flex-wrap gap-4 stagger">
          {teams.map(t => <TeamCard key={t.id} team={t} />)}
          <AddCard label="Tambah Divisi" onClick={() => setModalType('addTeam')} />
        </div>
      </section>

      <Connector />

      {/* Projects */}
      <section>
        <SectionHeader icon="📁" title="Proyek Aktif" count={projects.length} />
        <div className="flex flex-wrap gap-4 stagger">
          {projects.map(p => <ProjectCard key={p.id} project={p} />)}
          <AddCard label="Tambah Proyek" onClick={() => setModalType('addProject')} />
        </div>
      </section>
    </div>
  )
}