/**
 * Tasks page — 3-column explorer layout (tree + list + detail).
 * Rebuilt for UI-Overhaul Phase 4.
 */

import { asError } from '@/utils/errorTypes';
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { ResizablePanel } from '@/components/ui/ResizablePanel';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select';
import { Modal } from '@/components/ui/Modal';
import { Badge } from '@/components/ui/Badge';
import { EmptyState } from '@/components/ui/EmptyState';
import { useToast } from '@/components/ui/Toast';
import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
import { Loader2, Plus, CheckSquare, Clock, AlertCircle, ChevronDown, ChevronRight, List, LayoutGrid } from 'lucide-react';
import {
  useTasks,
  useCreateTask,
  useUpdateTask,
  useDeleteTask,
  useUpdateTaskStatus,
  type Task,
  type TaskFilter,
  type TaskStatus,
} from '@/api/tasks';

const STATUS_COLORS: Record<string, 'secondary' | 'info' | 'success' | 'warning' | 'danger'> = {
  open: 'secondary',
  in_progress: 'info',
  review: 'warning',
  blocked: 'danger',
  done: 'success',
  cancelled: 'secondary',
};

const PRIORITY_COLORS: Record<string, 'secondary' | 'info' | 'warning' | 'danger'> = {
  low: 'secondary',
  medium: 'info',
  high: 'warning',
  urgent: 'danger',
};

const STATUS_GROUPS: { key: string; label: string; statuses: TaskStatus[] }[] = [
  { key: 'open', label: 'Offen', statuses: ['open'] },
  { key: 'in_progress', label: 'In Bearbeitung', statuses: ['in_progress', 'review'] },
  { key: 'blocked', label: 'Blockiert', statuses: ['blocked'] },
  { key: 'done', label: 'Erledigt', statuses: ['done', 'cancelled'] },
];

const PRIORITY_GROUPS: { key: string; label: string }[] = [
  { key: 'urgent', label: 'Dringend' },
  { key: 'high', label: 'Hoch' },
  { key: 'medium', label: 'Mittel' },
  { key: 'low', label: 'Niedrig' },
];

function formatDate(dateStr: string | null): string {
  if (!dateStr) return '—';
  try { return new Date(dateStr).toLocaleDateString(); } catch { return dateStr; }
}

function isOverdue(dateStr: string | null, status: string): boolean {
  if (!dateStr || status === 'done' || status === 'cancelled') return false;
  try { return new Date(dateStr) < new Date(); } catch { return false; }
}

// ─── Task Tree ───

interface TaskTreeProps {
  tasks: Task[];
  selectedTaskId: string | null;
  onSelect: (task: Task) => void;
  filter: TaskFilter;
  setFilter: (f: TaskFilter) => void;
}

function TaskTree({ tasks, selectedTaskId, onSelect, filter, setFilter }: TaskTreeProps) {
  const { t } = useTranslation();
  const [treeMode, setTreeMode] = useState<'status' | 'priority'>('status');
  const [expanded, setExpanded] = useState<Set<string>>(new Set(['open', 'in_progress', 'urgent', 'high']));

  const toggle = (key: string) => setExpanded((prev) => {
    const next = new Set(prev);
    if (next.has(key)) next.delete(key); else next.add(key);
    return next;
  });

  const grouped = useMemo(() => {
    if (treeMode === 'status') {
      return STATUS_GROUPS.map(g => ({
        key: g.key,
        label: g.label,
        items: tasks.filter(t => g.statuses.includes(t.status)),
      }));
    }
    return PRIORITY_GROUPS.map(g => ({
      key: g.key,
      label: g.label,
      items: tasks.filter(t => t.priority === g.key),
    }));
  }, [tasks, treeMode]);

  return (
    <div className="flex flex-col h-full">
      <div className="px-3 py-2 border-b border-secondary-200">
        <h2 className="text-sm font-semibold text-secondary-900 flex items-center gap-2">
          <CheckSquare className="w-4 h-4" />
          {t('tasks.title')}
        </h2>
      </div>
      <div className="px-3 py-2 border-b border-secondary-200">
        <div className="flex gap-1">
          <button
            onClick={() => setTreeMode('status')}
            className={`px-2 py-1 text-xs rounded ${treeMode === 'status' ? 'bg-primary-100 text-primary-700' : 'text-secondary-500 hover:bg-secondary-100'}`}
          >{t('tasks.nachstatus')}</button>
          <button
            onClick={() => setTreeMode('priority')}
            className={`px-2 py-1 text-xs rounded ${treeMode === 'priority' ? 'bg-primary-100 text-primary-700' : 'text-secondary-500 hover:bg-secondary-100'}`}
          >{t('tasks.nachpriorität')}</button>
        </div>
      </div>
      <div className="flex-1 overflow-y-auto p-2">
        <button
          onClick={() => setFilter({})}
          className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium min-h-touch hover:bg-secondary-100 ${!filter.status && !filter.priority ? 'bg-primary-50 text-primary-700' : 'text-secondary-700'}`}
        >{t('tasks.alletasks')}{tasks.length})</button>
        {grouped.map(group => (
          <div key={group.key} className="mt-1">
            <div
              className="flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-secondary-500 hover:bg-secondary-50 cursor-pointer select-none"
              onClick={() => toggle(group.key)}
            >
              {expanded.has(group.key) ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
              <span className="flex-1">{group.label}</span>
              <span className="text-secondary-400">{group.items.length}</span>
            </div>
            {expanded.has(group.key) && group.items.map(task => (
              <button
                key={task.id}
                onClick={() => onSelect(task)}
                className={`w-full flex items-start gap-2 px-3 py-2 text-left hover:bg-secondary-50 transition-colors ${selectedTaskId === task.id ? 'bg-primary-50 border-l-2 border-primary-500' : ''}`}
                style={{ paddingLeft: '28px' }}
              >
                <div className="flex-1 min-w-0">
                  <span className="text-sm font-medium text-secondary-900 truncate block">{task.title}</span>
                  {task.due_date && (
                    <span className={`text-xs flex items-center gap-1 mt-0.5 ${isOverdue(task.due_date, task.status) ? 'text-danger-600' : 'text-secondary-400'}`}>
                      <Clock className="w-3 h-3" />{formatDate(task.due_date)}
                    </span>
                  )}
                </div>
              </button>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Task Detail ───

interface TaskDetailProps {
  task: Task | null;
  onEdit: () => void;
  onDelete: () => void;
  onStatusChange: (status: TaskStatus) => void;
}

function TaskDetail({ task, onEdit, onDelete, onStatusChange }: TaskDetailProps) {
  const { t } = useTranslation();
  if (!task) {
    return <EmptyState title={t('tasks.selectTask', 'Task auswählen')} description={t('tasks.selectTaskDesc', 'Wähle einen Task aus der Liste')} />;
  }
  const overdue = isOverdue(task.due_date, task.status);
  return (
    <div className="overflow-y-auto h-full p-4" data-testid="task-detail">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-lg font-semibold text-secondary-900">{task.title}</h2>
        <div className="flex gap-2">
          <Button size="sm" variant="ghost" onClick={onEdit}>{t('common.edit')}</Button>
          <Button size="sm" variant="danger" onClick={onDelete}>{t('common.delete')}</Button>
        </div>
      </div>
      <div className="flex items-center gap-2 mb-4">
        <Badge variant={STATUS_COLORS[task.status] || 'secondary'}>
          {t(`tasks.status${task.status.charAt(0).toUpperCase() + task.status.slice(1).replace('_', '')}`)}
        </Badge>
        <Badge variant={PRIORITY_COLORS[task.priority] || 'secondary'}>
          {t(`tasks.priority${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}`)}
        </Badge>
        {overdue && <Badge variant="danger"><AlertCircle className="w-3 h-3 inline mr-1" />Überfällig</Badge>}
      </div>
      {task.description && <p className="text-sm text-secondary-700 mb-4 whitespace-pre-wrap">{task.description}</p>}
      <div className="space-y-2 text-sm">
        <div><span className="font-medium text-secondary-500">{t('tasks.dueDate')}:</span> {formatDate(task.due_date)}</div>
        <div><span className="font-medium text-secondary-500">Status:</span> 
          <select value={task.status} onChange={(e) => onStatusChange(e.target.value as TaskStatus)} className="ml-2 text-sm border border-secondary-200 rounded px-2 py-1">
            <option value="open">Offen</option>
            <option value="in_progress">{t('tasks.inbearbeitung')}</option>
            <option value="review">Review</option>
            <option value="done">Erledigt</option>
            <option value="cancelled">Abgebrochen</option>
          </select>
        </div>
      </div>
      {task.status !== 'done' && (
        <Button size="sm" className="mt-4" onClick={() => onStatusChange('done')}>{t('tasks.markDone')}</Button>
      )}
    </div>
  );
}

// ─── Main Page ───

export function TasksPage() {
  const { t } = useTranslation();
  const toast = useToast();
  const registerItems = usePluginToolbarStore((s) => s.registerItems);
  const unregisterPlugin = usePluginToolbarStore((s) => s.unregisterPlugin);

  const [page, setPage] = useState(1);
  const [filter, setFilter] = useState<TaskFilter>({});
  const [search, setSearch] = useState('');
  const [debouncedSearch, setDebouncedSearch] = useState('');
  const [createModalOpen, setCreateModalOpen] = useState(false);
  const [editingTask, setEditingTask] = useState<Task | null>(null);
  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
  const [viewMode, setViewMode] = useState<'list' | 'kanban'>('list');
  const [activeView, setActiveView] = useState<'tree' | 'list' | 'detail'>('tree');

  React.useEffect(() => {
    const timer = setTimeout(() => setDebouncedSearch(search), 300);
    return () => clearTimeout(timer);
  }, [search]);

  const effectiveFilter = useMemo(() => ({ ...filter, search: debouncedSearch || undefined }), [filter, debouncedSearch]);
  const { data, isLoading } = useTasks(page, 100, effectiveFilter);
  const createMutation = useCreateTask();
  const updateMutation = useUpdateTask();
  const deleteMutation = useDeleteTask();
  const statusMutation = useUpdateTaskStatus();
  const tasks = data?.items || [];

  // Register toolbar
  useEffect(() => {
    registerItems('tasks', [
      { id: 'new-task', plugin: 'tasks', label: t('tasks.create'), group: 'actions', onClick: () => { setEditingTask(null); setCreateModalOpen(true); }, icon: <Plus className="w-3.5 h-3.5" strokeWidth={2} /> },
      { id: 'view-mode', plugin: 'tasks', label: viewMode === 'list' ? 'Liste' : 'Kanban', group: 'view-mode', type: 'select' as const, selectValue: viewMode, selectOptions: [{ value: 'list', label: 'Liste' }, { value: 'kanban', label: 'Kanban' }], onSelect: (v: string) => setViewMode(v as 'list' | 'kanban'), onClick: () => {} },
    ]);
    return () => unregisterPlugin('tasks');
  }, [registerItems, unregisterPlugin, t, viewMode]);

  const handleCreate = async (formData: Partial<Task>) => {
    try {
      await createMutation.mutateAsync({
        title: formData.title || '',
        description: formData.description || null,
        priority: formData.priority || 'medium',
        status: formData.status || 'open',
        due_date: formData.due_date || null,
      });
      toast.success(t('tasks.created'));
      setCreateModalOpen(false);
    } catch (err: unknown) { const errObj = asError(err); toast.error(errObj.message || t('common.error')); }
  };

  const handleUpdate = async (formData: Partial<Task>) => {
    if (!editingTask) return;
    try {
      await updateMutation.mutateAsync({ id: editingTask.id, data: formData });
      toast.success(t('tasks.updated'));
      setEditingTask(null);
    } catch (err: unknown) { const errObj = asError(err); toast.error(errObj.message || t('common.error')); }
  };

  const handleDelete = async (task: Task) => {
    if (!window.confirm(t('tasks.deleteConfirm'))) return;
    try {
      await deleteMutation.mutateAsync(task.id);
      toast.success(t('tasks.deleted'));
      setSelectedTask(null);
    } catch (err: unknown) { const errObj = asError(err); toast.error(errObj.message || t('common.error')); }
  };

  const handleStatusChange = async (task: Task, newStatus: TaskStatus) => {
    try {
      await statusMutation.mutateAsync({ id: task.id, status: newStatus });
      toast.success(t('tasks.statusUpdated'));
      if (selectedTask?.id === task.id) setSelectedTask({ ...task, status: newStatus });
    } catch (err: unknown) { const errObj = asError(err); toast.error(errObj.message || t('common.error')); }
  };

  const handleSelectTask = useCallback((task: Task) => {
    setSelectedTask(task);
    setActiveView('detail');
  }, []);

  // Kanban view
  const kanbanColumns = STATUS_GROUPS.map(g => ({
    ...g,
    items: tasks.filter(t => g.statuses.includes(t.status)),
  }));

  return (
    <div className="flex h-full" data-testid="tasks-page">
      {/* Desktop: 3-column layout */}
      <div className="hidden md:flex w-full">
        <ResizablePanel initialWidth={224} minWidth={180} maxWidth={350} className="border-r border-secondary-200 bg-white">
          <TaskTree tasks={tasks} selectedTaskId={selectedTask?.id ?? null} onSelect={handleSelectTask} filter={filter} setFilter={setFilter} />
        </ResizablePanel>

        <div className="flex-1 flex">
          {/* List/Kanban */}
          <div className="flex-1 overflow-y-auto">
            {/* Search bar */}
            <div className="px-4 py-2 border-b border-secondary-200 bg-white">
              <Input type="text" placeholder={t('common.search')} value={search} onChange={(e) => setSearch(e.target.value)} className="w-full" />
            </div>

            {isLoading ? (
              <div className="flex items-center justify-center py-12"><Loader2 className="animate-spin h-5 w-5 text-secondary-400" /></div>
            ) : tasks.length === 0 ? (
              <EmptyState title={t('tasks.noTasks')} description={t('tasks.noTasksDesc')} />
            ) : viewMode === 'list' ? (
              <ul className="divide-y divide-secondary-100" role="list">
                {tasks.map((task) => {
                  const overdue = isOverdue(task.due_date, task.status);
                  return (
                    <li key={task.id} className="px-4 py-3 hover:bg-secondary-50 cursor-pointer" onClick={() => handleSelectTask(task)} data-testid={`task-item-${task.id}`}>
                      <div className="flex items-start gap-3">
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2">
                            <span className="text-sm font-medium text-secondary-900">{task.title}</span>
                            {overdue && <AlertCircle className="w-4 h-4 text-danger-500" />}
                          </div>
                          {task.description && <p className="text-xs text-secondary-500 truncate mt-0.5">{task.description}</p>}
                          <div className="flex items-center gap-2 mt-1">
                            <Badge variant={STATUS_COLORS[task.status] || 'secondary'}>{t(`tasks.status${task.status.charAt(0).toUpperCase() + task.status.slice(1).replace('_', '')}`)}</Badge>
                            <Badge variant={PRIORITY_COLORS[task.priority] || 'secondary'}>{t(`tasks.priority${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}`)}</Badge>
                            {task.due_date && <span className={`text-xs flex items-center gap-1 ${overdue ? 'text-danger-600' : 'text-secondary-500'}`}><Clock className="w-3 h-3" />{formatDate(task.due_date)}</span>}
                          </div>
                        </div>
                        {task.status !== 'done' && (
                          <button onClick={(e) => { e.stopPropagation(); handleStatusChange(task, 'done'); }} className="text-xs text-success-600 hover:text-success-700 px-2 py-1 min-h-touch">{t('tasks.markDone')}</button>
                        )}
                      </div>
                    </li>
                  );
                })}
              </ul>
            ) : (
              /* Kanban view */
              <div className="flex gap-4 p-4 overflow-x-auto h-full">
                {kanbanColumns.map(col => (
                  <div key={col.key} className="flex-shrink-0 w-64 bg-secondary-50 rounded-lg p-3 max-h-full overflow-y-auto">
                    <h3 className="text-sm font-semibold text-secondary-700 mb-2 flex items-center justify-between">
                      {col.label}<span className="text-xs text-secondary-400">{col.items.length}</span>
                    </h3>
                    <div className="space-y-2">
                      {col.items.map(task => (
                        <div key={task.id} onClick={() => handleSelectTask(task)} className={`bg-white rounded-md p-3 shadow-sm cursor-pointer hover:shadow-md transition-shadow ${selectedTask?.id === task.id ? 'ring-2 ring-primary-500' : ''}`}>
                          <p className="text-sm font-medium text-secondary-900">{task.title}</p>
                          <div className="flex items-center gap-1 mt-2">
                            <Badge variant={PRIORITY_COLORS[task.priority] || 'secondary'}>{task.priority}</Badge>
                            {task.due_date && <span className={`text-xs ${isOverdue(task.due_date, task.status) ? 'text-danger-600' : 'text-secondary-400'}`}><Clock className="w-3 h-3 inline" />{formatDate(task.due_date)}</span>}
                          </div>
                        </div>
                      ))}
                      {col.items.length === 0 && <p className="text-xs text-secondary-400 text-center py-4">{t('tasks.keinetasks')}</p>}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Detail panel */}
          <ResizablePanel initialWidth={350} minWidth={250} maxWidth={500} className="border-l border-secondary-200 bg-white">
            <TaskDetail
              task={selectedTask}
              onEdit={() => { setEditingTask(selectedTask); }}
              onDelete={() => { if (selectedTask) handleDelete(selectedTask); }}
              onStatusChange={(s) => { if (selectedTask) handleStatusChange(selectedTask, s); }}
            />
          </ResizablePanel>
        </div>
      </div>

      {/* Mobile: single pane */}
      <div className="md:hidden w-full">
        {activeView === 'tree' ? (
          <TaskTree tasks={tasks} selectedTaskId={selectedTask?.id ?? null} onSelect={handleSelectTask} filter={filter} setFilter={setFilter} />
        ) : activeView === 'detail' && selectedTask ? (
          <TaskDetail task={selectedTask} onEdit={() => { setEditingTask(selectedTask); }} onDelete={() => handleDelete(selectedTask)} onStatusChange={(s) => handleStatusChange(selectedTask, s)} />
        ) : (
          <div className="overflow-y-auto">
            <div className="px-4 py-2 border-b border-secondary-200 bg-white">
              <Input type="text" placeholder={t('common.search')} value={search} onChange={(e) => setSearch(e.target.value)} className="w-full" />
            </div>
            {isLoading ? <Loader2 className="animate-spin h-5 w-5 text-secondary-400 mx-auto mt-8" /> : tasks.length === 0 ? <EmptyState title={t('tasks.noTasks')} description={t('tasks.noTasksDesc')} /> : (
              <ul className="divide-y divide-secondary-100">
                {tasks.map(task => (
                  <li key={task.id} className="px-4 py-3 hover:bg-secondary-50 cursor-pointer" onClick={() => handleSelectTask(task)}>
                    <span className="text-sm font-medium text-secondary-900">{task.title}</span>
                    <div className="flex gap-1 mt-1"><Badge variant={STATUS_COLORS[task.status] || 'secondary'}>{task.status}</Badge></div>
                  </li>
                ))}
              </ul>
            )}
          </div>
        )}
      </div>

      {/* Create/Edit Modal */}
      <TaskModal open={createModalOpen || !!editingTask} onClose={() => { setCreateModalOpen(false); setEditingTask(null); }} task={editingTask} onSubmit={editingTask ? handleUpdate : handleCreate} />
    </div>
  );
}

// ── Task Create/Edit Modal ──

function TaskModal({ open, onClose, task, onSubmit }: {
  open: boolean; onClose: () => void; task?: Task | null; onSubmit: (data: Partial<Task>) => void;
}) {
  const { t } = useTranslation();
  const [title, setTitle] = useState(task?.title || '');
  const [description, setDescription] = useState(task?.description || '');
  const [priority, setPriority] = useState(task?.priority || 'medium');
  const [status, setStatus] = useState(task?.status || 'open');
  const [dueDate, setDueDate] = useState(task?.due_date ? task.due_date.slice(0, 10) : '');

  React.useEffect(() => {
    if (open) {
      setTitle(task?.title || ''); setDescription(task?.description || '');
      setPriority(task?.priority || 'medium'); setStatus(task?.status || 'open');
      setDueDate(task?.due_date ? task.due_date.slice(0, 10) : '');
    }
  }, [open, task]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!title.trim()) return;
    onSubmit({ title: title.trim(), description: description || null, priority: priority as any, status: status as any, due_date: dueDate ? new Date(dueDate).toISOString() : null });
  };

  return (
    <Modal open={open} onClose={onClose} title={task ? t('tasks.edit') : t('tasks.create')} size="md">
      <form onSubmit={handleSubmit} className="space-y-4">
        <Input label={t('tasks.title_field')} value={title} onChange={(e) => setTitle(e.target.value)} required data-testid="task-title-input" />
        <div><label className="block text-sm font-medium text-secondary-700 mb-1">{t('tasks.description')}</label><textarea value={description} onChange={(e) => setDescription(e.target.value)} className="w-full px-3 py-2 text-sm rounded-md border border-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-20" /></div>
        <div className="grid grid-cols-2 gap-3">
          <Select label={t('tasks.status_field')} options={[{ value: 'open', label: 'Offen' }, { value: 'in_progress', label: 'In Bearbeitung' }, { value: 'done', label: 'Erledigt' }]} value={status} onChange={(e) => setStatus(e.target.value as any)} />
          <Select label={t('tasks.priority_field')} options={[{ value: 'low', label: 'Niedrig' }, { value: 'medium', label: 'Mittel' }, { value: 'high', label: 'Hoch' }, { value: 'urgent', label: 'Dringend' }]} value={priority} onChange={(e) => setPriority(e.target.value as any)} />
        </div>
        <Input label={t('tasks.dueDate')} type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} />
        <div className="flex justify-end gap-2 pt-2"><Button variant="secondary" onClick={onClose}>{t('common.cancel')}</Button><Button type="submit" data-testid="task-submit-btn">{t('common.save')}</Button></div>
      </form>
    </Modal>
  );
}