ims/components/capa/capa-board.tsx

'use client'

import { useState } from 'react'
import Link from 'next/link'

type CapaStatus = 'open' | 'in_progress' | 'overdue' | 'pending_verification' | 'verified' | 'reopened' | 'closed'

type CapaAction = {
  id: string
  incident_id: string
  description: string
  department: string
  due_date: string
  priority: 'low' | 'med' | 'high'
  status: CapaStatus
  incidents: { reference_no: string | null } | null
  owner: { name: string } | null
}

const STATUS_ORDER: CapaStatus[] = ['open', 'in_progress', 'overdue', 'pending_verification', 'verified', 'closed']
const STATUS_LABELS: Record<CapaStatus, string> = {
  open: 'Open',
  in_progress: 'In Progress',
  overdue: 'Overdue',
  pending_verification: 'Pending Verification',
  verified: 'Verified',
  reopened: 'Reopened',
  closed: 'Closed',
}
const STATUS_COLORS: Record<CapaStatus, string> = {
  open: 'bg-blue-50 border-blue-200',
  in_progress: 'bg-yellow-50 border-yellow-200',
  overdue: 'bg-red-50 border-red-200',
  pending_verification: 'bg-purple-50 border-purple-200',
  verified: 'bg-green-50 border-green-200',
  reopened: 'bg-orange-50 border-orange-200',
  closed: 'bg-gray-50 border-gray-200',
}
const PRIORITY_BADGE: Record<'low' | 'med' | 'high', string> = {
  low: 'bg-gray-100 text-gray-600',
  med: 'bg-yellow-100 text-yellow-700',
  high: 'bg-red-100 text-red-700',
}

interface Props {
  capas: CapaAction[]
}

export function CapaBoard({ capas }: Props) {
  const [view, setView] = useState<'board' | 'table'>('board')

  const byStatus = STATUS_ORDER.reduce<Record<CapaStatus, CapaAction[]>>((acc, s) => {
    acc[s] = capas.filter(c => c.status === s)
    return acc
  }, {} as Record<CapaStatus, CapaAction[]>)

  if (view === 'table') {
    return (
      <div>
        <div className="flex justify-end mb-3">
          <button onClick={() => setView('board')} className="text-sm text-blue-600 hover:underline">Board view</button>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left text-xs text-gray-500 uppercase border-b">
                <th className="pb-2 pr-4">Ref</th>
                <th className="pb-2 pr-4">Action</th>
                <th className="pb-2 pr-4">Owner</th>
                <th className="pb-2 pr-4">Due</th>
                <th className="pb-2 pr-4">Priority</th>
                <th className="pb-2">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100">
              {capas.map(c => (
                <tr key={c.id}>
                  <td className="py-2 pr-4 text-gray-500 text-xs">
                    {(c.incidents as { reference_no: string | null } | null)?.reference_no ?? '—'}
                  </td>
                  <td className="py-2 pr-4">
                    <Link href={`/hse/capa/${c.id}`} className="text-blue-600 hover:underline line-clamp-2">
                      {c.description}
                    </Link>
                  </td>
                  <td className="py-2 pr-4 text-gray-600">{(c.owner as { name: string } | null)?.name ?? '—'}</td>
                  <td className="py-2 pr-4 text-gray-600">{c.due_date}</td>
                  <td className="py-2 pr-4">
                    <span className={`px-2 py-0.5 rounded text-xs font-medium ${PRIORITY_BADGE[c.priority]}`}>
                      {c.priority}
                    </span>
                  </td>
                  <td className="py-2 text-gray-600 text-xs">{STATUS_LABELS[c.status]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    )
  }

  return (
    <div>
      <div className="flex justify-end mb-3">
        <button onClick={() => setView('table')} className="text-sm text-blue-600 hover:underline">Table view</button>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {STATUS_ORDER.filter(s => s !== 'reopened').map(status => (
          <div key={status} className={`rounded-xl border p-4 ${STATUS_COLORS[status]}`}>
            <h3 className="text-xs font-semibold uppercase tracking-wide text-gray-600 mb-3">
              {STATUS_LABELS[status]} ({byStatus[status].length})
            </h3>
            <div className="space-y-2">
              {byStatus[status].map(c => (
                <Link key={c.id} href={`/hse/capa/${c.id}`}
                  className="block bg-white rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                  <p className="text-sm text-gray-800 line-clamp-2 mb-1">{c.description}</p>
                  <div className="flex items-center justify-between text-xs text-gray-500">
                    <span>{(c.owner as { name: string } | null)?.name ?? '—'}</span>
                    <span className={`px-1.5 py-0.5 rounded ${PRIORITY_BADGE[c.priority]}`}>{c.priority}</span>
                  </div>
                  <p className="text-xs text-gray-400 mt-1">Due {c.due_date}</p>
                </Link>
              ))}
              {byStatus[status].length === 0 && (
                <p className="text-xs text-gray-400 text-center py-3">Empty</p>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}