import type { Plan } from '../lib/api'
import { TimeStamp, ClockGlyph } from './Metadata'

const priorityBadge: Record<string, string> = {
  critical: 'bg-red-600 text-white',
  '1': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
  '2': 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
  '3': 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
  '4': 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
  '5': 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400',
  backlog: 'bg-gray-50 text-gray-500 dark:bg-gray-800 dark:text-gray-500',
}

const columns = [
  { key: 'draft', label: 'Draft' },
  { key: 'approved', label: 'Approved' },
  { key: 'in_progress', label: 'In Progress' },
  { key: 'done', label: 'Done' },
] as const

function PlanCard({ plan, onClick }: { plan: Plan; onClick: () => void }) {
  const isActive = plan.status === 'in_progress'
  return (
    <button
      onClick={onClick}
      className="group w-full text-left rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-gray-400 dark:hover:border-gray-500 transition-colors cursor-pointer overflow-hidden"
    >
      <div className="p-3">
        <div className="flex items-start justify-between gap-2 mb-2">
          <span className="font-display text-[15px] leading-snug font-medium text-gray-900 dark:text-gray-100 line-clamp-2">
            {plan.title}
          </span>
          <span className={`shrink-0 text-[10px] font-mono font-medium uppercase tracking-wider px-1.5 py-0.5 rounded ${priorityBadge[plan.priority] ?? ''}`}>
            {plan.priority === 'critical' ? 'crit' : `p${plan.priority}`}
          </span>
        </div>

        <div className="flex items-center justify-between">
          <span className="font-mono text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500">
            {plan.team}
          </span>
          <span className="flex items-center gap-1 text-gray-400 dark:text-gray-500">
            <ClockGlyph className="w-2.5 h-2.5" />
            <TimeStamp iso={plan.created_at} />
          </span>
        </div>
      </div>

      {isActive && (
        <div className="h-0.5 bg-gradient-to-r from-blue-500 via-blue-400 to-transparent pulse-soft" />
      )}
    </button>
  )
}

export function PlanBoard({ plans, onSelect }: { plans: Plan[]; onSelect: (plan: Plan) => void }) {
  return (
    <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5">
      <div className="flex items-baseline justify-between mb-4">
        <h2 className="font-display text-xl font-medium text-gray-900 dark:text-gray-100">Plan Board</h2>
        <span className="font-mono text-[10px] uppercase tracking-wider text-gray-400">
          {plans.length} {plans.length === 1 ? 'plan' : 'plans'}
        </span>
      </div>

      <div className="grid grid-cols-4 gap-4">
        {columns.map((col) => {
          const colPlans = plans.filter((p) => p.status === col.key || (col.key === 'draft' && p.status === 'clarification'))
          return (
            <div key={col.key}>
              <div className="flex items-baseline justify-between mb-3 pb-2 border-b border-gray-200 dark:border-gray-700">
                <span className="font-mono text-[10px] font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  {col.label}
                </span>
                <span className="font-mono text-[10px] tabular text-gray-400 dark:text-gray-500">
                  {colPlans.length}
                </span>
              </div>
              <div className="space-y-2 min-h-[100px]">
                {colPlans.map((plan) => (
                  <PlanCard key={plan.id} plan={plan} onClick={() => onSelect(plan)} />
                ))}
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
