'use client'

import { useDebugStore } from './debug-store'

export function StorePanel() {
  const tasks = useDebugStore((s) => s.tasks)
  const applyCount = useDebugStore((s) => s.applyCount)
  const skipCount = useDebugStore((s) => s.skipCount)
  const reset = useDebugStore((s) => s.reset)

  const taskList = Object.values(tasks)

  return (
    <div style={{ marginTop: 16 }}>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 12,
          padding: 8,
          background: '#eef',
          border: '1px solid #cce',
          borderRadius: 4,
          fontSize: 12,
        }}
      >
        <strong>Store layer:</strong>
        <span>
          applyCount: <code>{applyCount}</code>
        </span>
        <span>
          skipCount: <code>{skipCount}</code>
        </span>
        <span>
          taskCount: <code>{taskList.length}</code>
        </span>
        <button
          onClick={reset}
          style={{
            marginLeft: 'auto',
            padding: '4px 10px',
            background: '#eee',
            border: '1px solid #ccc',
            borderRadius: 4,
            fontSize: 12,
            cursor: 'pointer',
          }}
        >
          reset store
        </button>
      </div>

      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12, marginTop: 8 }}>
        <thead>
          <tr style={{ background: '#f0f0f0', textAlign: 'left' }}>
            <th style={{ padding: 6, border: '1px solid #ddd', width: 220 }}>id</th>
            <th style={{ padding: 6, border: '1px solid #ddd', width: 100 }}>status</th>
            <th style={{ padding: 6, border: '1px solid #ddd' }}>title</th>
            <th style={{ padding: 6, border: '1px solid #ddd', width: 220 }}>updated_at (lokaal)</th>
          </tr>
        </thead>
        <tbody>
          {taskList.length === 0 ? (
            <tr>
              <td colSpan={4} style={{ padding: 8, textAlign: 'center', color: '#888' }}>
                Store is leeg. Trigger een event en kijk of de tabel hier vult.
              </td>
            </tr>
          ) : (
            taskList.map((t) => (
              <tr key={t.id}>
                <td style={{ padding: 6, border: '1px solid #ddd' }}>
                  <code>{t.id}</code>
                </td>
                <td
                  style={{
                    padding: 6,
                    border: '1px solid #ddd',
                    fontWeight: 'bold',
                    color: statusColor(t.status),
                  }}
                >
                  {t.status}
                </td>
                <td style={{ padding: 6, border: '1px solid #ddd' }}>{t.title}</td>
                <td style={{ padding: 6, border: '1px solid #ddd', whiteSpace: 'nowrap' }}>
                  {t.updated_at}
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  )
}

function statusColor(status: string) {
  switch (status) {
    case 'TO_DO':
      return '#888'
    case 'IN_PROGRESS':
      return '#0070cc'
    case 'REVIEW':
      return '#cc7a00'
    case 'DONE':
      return 'green'
    default:
      return 'inherit'
  }
}