'use client'

import { useState, useRef } from 'react'
import { useAppStore } from '@/store'
import { MEMBERS } from '@/lib/data'
import { AvatarGroup } from '@/components/ui/Avatar'
import { PriorityBadge } from '@/components/ui/Badge'
import { formatDateShort, isOverdue } from '@/lib/utils'
import { showToast } from '@/components/ui/Toast'
import type { Task, TaskStatus } from '@/types'

const COL_COLORS: Record<TaskStatus, string> = {
  todo:       '#6366F1',
  inprogress: '#F97316',
  review:     '#8B5CF6',
  done:       '#22C55E',
}

/* ── Task Card ── */
function TaskCard({
  task,
  onDragStart,
  onClick,
}: {
  task: Task
  onDragStart: (e: React.DragEvent, id: string, from: TaskStatus) => void
  onClick: (task: Task) => void
}) {
  const members     = MEMBERS.filter(m => task.assigneeIds.includes(m.id))
  const od          = task.status !== 'done' && isOverdue(task.dueDate)
  const doneChecks  = task.subtasks.filter(s => s.completed).length

  return (
    <div
      draggable
      onDragStart={(e) => onDragStart(e, task.id, task.status)}
      onClick={() => onClick(task)}
      className="bg-white rounded-xl p-3.5 mb-2.5 shadow-sm border border-gray-150 cursor-grab active:cursor-grabbing
                 hover:shadow-md hover:border-gray-200 transition-all select-none"
    >
      <div className={`text-sm font-medium mb-2 leading-snug ${task.status === 'done' ? 'line-through text-gray-400' : 'text-gray-800'}`}>
        {task.title}
      </div>

      {task.tags.length > 0 && (
        <div className="flex flex-wrap gap-1 mb-2">
          {task.tags.slice(0, 3).map(tag => (
            <span key={tag} className="text-[9px] font-semibold px-1.5 py-0.5 rounded bg-gray-100 text-gray-500 uppercase tracking-wide">
              #{tag}
            </span>
          ))}
        </div>
      )}

      <div className="flex items-center gap-2 flex-wrap mb-2.5">
        <PriorityBadge priority={task.priority} />
        <span className={`text-[11px] flex items-center gap-1 ${od ? 'text-red-500 font-medium' : 'text-gray-400'}`}>
          📅 {formatDateShort(task.dueDate)}{od ? ' ⚠️' : ''}
        </span>
      </div>

      <div className="flex items-center justify-between">
        <AvatarGroup members={members} max={3} size="xs" />
        {task.subtasks.length > 0 && (
          <span className="text-[11px] text-gray-400 flex items-center gap-1">
            ☑ {doneChecks}/{task.subtasks.length}
          </span>
        )}
      </div>
    </div>
  )
}

/* ── Column ── */
function KanbanColumn({
  colId, title, tasks,
  onDragStart, onDragOver, onDrop, onTaskClick, onAddTask,
}: {
  colId: TaskStatus
  title: string
  tasks: Task[]
  onDragStart: (e: React.DragEvent, id: string, from: TaskStatus) => void
  onDragOver:  (e: React.DragEvent) => void
  onDrop:      (e: React.DragEvent, to: TaskStatus) => void
  onTaskClick: (task: Task) => void
  onAddTask:   (colId: TaskStatus) => void
}) {
  const [isOver, setIsOver] = useState(false)
  const color = COL_COLORS[colId]

  return (
    <div
      className={`min-w-[260px] flex-shrink-0 rounded-xl p-3 transition-all ${
        isOver ? 'bg-gold-50 border-2 border-dashed border-gold-400' : 'bg-gray-100 border-2 border-transparent'
      }`}
      onDragOver={(e) => { e.preventDefault(); setIsOver(true); onDragOver(e) }}
      onDragLeave={() => setIsOver(false)}
      onDrop={(e) => { setIsOver(false); onDrop(e, colId) }}
    >
      {/* Header */}
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <div className="w-2.5 h-2.5 rounded-full" style={{ background: color }} />
          <span className="text-xs font-semibold text-gray-700">{title}</span>
        </div>
        <div className="flex items-center gap-1.5">
          <span className="bg-white border border-gray-200 text-gray-500 text-[10px] font-semibold px-2 py-0.5 rounded-full">
            {tasks.length}
          </span>
          <button
            onClick={() => onAddTask(colId)}
            className="w-6 h-6 rounded-md bg-white border border-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-700 hover:border-gray-300 transition-all text-sm"
          >
            +
          </button>
        </div>
      </div>

      {/* Tasks */}
      <div className="min-h-[80px]">
        {tasks.map(task => (
          <TaskCard
            key={task.id}
            task={task}
            onDragStart={onDragStart}
            onClick={onTaskClick}
          />
        ))}
        {tasks.length === 0 && (
          <div className="flex flex-col items-center justify-center py-8 text-gray-300 text-xs">
            <span className="text-2xl mb-1">📭</span>
            Tidak ada tugas
          </div>
        )}
      </div>

      {/* Add button */}
      <button
        onClick={() => onAddTask(colId)}
        className="w-full mt-1 py-2 border-2 border-dashed border-gray-200 rounded-xl text-[11px] font-medium text-gray-400
                   hover:border-gold-400 hover:text-gold-600 hover:bg-gold-50 transition-all"
      >
        + Tambah Tugas
      </button>
    </div>
  )
}

/* ── Main Board ── */
export function KanbanBoard() {
  const { columns, tasks, moveTask, setSelectedTask, setModalType } = useAppStore()
  const dragId  = useRef<string | null>(null)
  const dragFrom = useRef<TaskStatus | null>(null)

  const handleDragStart = (e: React.DragEvent, taskId: string, from: TaskStatus) => {
    dragId.current   = taskId
    dragFrom.current = from
    e.dataTransfer.effectAllowed = 'move'
    ;(e.currentTarget as HTMLElement).style.opacity = '0.5'
  }

  const handleDragEnd = (e: React.DragEvent) => {
    ;(e.currentTarget as HTMLElement).style.opacity = '1'
  }

  const handleDrop = (e: React.DragEvent, to: TaskStatus) => {
    e.preventDefault()
    if (!dragId.current || !dragFrom.current) return
    if (dragFrom.current === to) return
    const task = tasks.find(t => t.id === dragId.current)
    moveTask(dragId.current, dragFrom.current, to)
    showToast(`✅ "${task?.title}" dipindah ke ${columns.find(c => c.id === to)?.title}`)
    dragId.current   = null
    dragFrom.current = null
  }

  const openTask = (task: Task) => {
    setSelectedTask(task)
    setModalType('taskDetail')
  }

  const openAddTask = (colId: TaskStatus) => {
    setModalType('addTask')
    // store colId hint
    useAppStore.setState({ selectedTask: { status: colId } as Task })
  }

  return (
    <div className="animate-fade-in h-full flex flex-col">
      <div className="flex items-center justify-between mb-5">
        <div>
          <h1 className="text-xl font-bold text-gray-900">Kanban Board</h1>
          <p className="text-sm text-gray-400 mt-0.5">Drag & drop tugas antar kolom untuk memperbarui status</p>
        </div>
        <button
          onClick={() => setModalType('addTask')}
          className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all hover:brightness-90"
          style={{ background:'#F5C542', color:'#444' }}
        >
          ➕ Tambah Tugas
        </button>
      </div>

      {/* Stats strip */}
      <div className="flex gap-3 mb-5 overflow-x-auto pb-1">
        {columns.map(col => {
          const colTasks = tasks.filter(t => col.taskIds.includes(t.id))
          return (
            <div key={col.id} className="flex items-center gap-2 bg-white rounded-xl px-4 py-2.5 shadow-sm border border-gray-150 flex-shrink-0">
              <div className="w-2 h-2 rounded-full" style={{ background: col.color }} />
              <span className="text-xs font-medium text-gray-600">{col.title}</span>
              <span className="text-sm font-bold text-gray-900">{colTasks.length}</span>
            </div>
          )
        })}
      </div>

      {/* Board */}
      <div className="flex gap-4 overflow-x-auto pb-4 flex-1" onDragEnd={handleDragEnd}>
        {columns.map(col => {
          const colTasks = tasks.filter(t => col.taskIds.includes(t.id))
          return (
            <KanbanColumn
              key={col.id}
              colId={col.id as TaskStatus}
              title={col.title}
              tasks={colTasks}
              onDragStart={handleDragStart}
              onDragOver={(e) => e.preventDefault()}
              onDrop={handleDrop}
              onTaskClick={openTask}
              onAddTask={openAddTask}
            />
          )
        })}
      </div>
    </div>
  )
}