import { useEffect, useState } from 'react';
import { api } from '../api';
import type { Task, TaskStatus } from '../types';

const COLUMNS: { key: TaskStatus; label: string }[] = [
  { key: 'pending', label: 'قيد الانتظار / Pending' },
  { key: 'in_progress', label: 'قيد التنفيذ / In Progress' },
  { key: 'awaiting_approval', label: 'بانتظار الموافقة / Awaiting Approval' },
  { key: 'done', label: 'مكتملة / Done' },
  { key: 'failed', label: 'فشلت / Failed' },
];

export default function Kanban({ onOpenTask }: { onOpenTask: (id: string) => void }) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [department, setDepartment] = useState<string>('');

  async function load() {
    const data = await api.listTasks(department ? { department } : undefined);
    setTasks(data);
  }

  useEffect(() => {
    load();
    const interval = setInterval(load, 5000);
    return () => clearInterval(interval);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [department]);

  const departments = Array.from(new Set(tasks.map((t) => t.department)));

  return (
    <div>
      <div style={{ marginBottom: 16, display: 'flex', gap: 8, alignItems: 'center' }}>
        <label style={{ margin: 0 }}>القسم / Department:</label>
        <select value={department} onChange={(e) => setDepartment(e.target.value)} style={{ width: 220, marginBottom: 0 }}>
          <option value="">الكل / All</option>
          {departments.map((d) => (
            <option key={d} value={d}>{d}</option>
          ))}
        </select>
      </div>
      <div className="board">
        {COLUMNS.map((col) => (
          <div className="column" key={col.key}>
            <h3>{col.label} ({tasks.filter((t) => t.status === col.key).length})</h3>
            {tasks
              .filter((t) => t.status === col.key)
              .map((t) => (
                <div className="card" key={t.id} onClick={() => onOpenTask(t.id)}>
                  <div className="title">{t.title}</div>
                  <div className="meta">
                    <span className="badge">{t.department}</span>{' '}
                    <span className={t.priority === 'urgent' ? 'priority-urgent' : t.priority === 'high' ? 'priority-high' : ''}>
                      {t.priority}
                    </span>
                  </div>
                  {t.assigned_agent && <div className="meta">👤 {t.assigned_agent}</div>}
                </div>
              ))}
          </div>
        ))}
      </div>
    </div>
  );
}