TaskDetail.tsx

'use client';

import Link from 'next/link';
import { useCallback, useRef, useState } from 'react';
import { ALLOWED_TRANSITIONS } from '@/constants/task';
import { useTaskSocket } from '@/hooks/useTaskSocket';
import { messages } from '@/i18n';
import { updateTaskStatus } from '@/lib/client-api';
import type { Task, TaskStatus } from '@/types/task';
import { EditTaskModal } from './EditTaskModal';
import { LocalTime } from './LocalTime';
import { PriorityBadge } from './PriorityBadge';
import { StatusBadge } from './StatusBadge';
import { Select } from './ui/Select';

const t = messages.detail;

/**
 * Detail view. Status changes use OPTIMISTIC updates (reflected immediately,
 * rolled back on error). Other fields are edited in a modal. The page also
 * stays live: WebSocket updates for THIS task are applied (reconciled by
 * `updatedAt`), but never while a local change is in flight.
 */
export function TaskDetail({ task: initialTask }: { task: Task }) {
  const [task, setTask] = useState<Task>(initialTask);
  const [error, setError] = useState<string | null>(null);
  const [pending, setPending] = useState(false);
  const [editing, setEditing] = useState(false);
  const pendingRef = useRef(false);

  const options = ALLOWED_TRANSITIONS[task.status];

  const applyRemote = useCallback(
    (incoming: Task) => {
      if (incoming.id !== initialTask.id) return; // not our task
      setTask((prev) => {
        if (pendingRef.current) return prev; // local change in flight
        if (
          new Date(incoming.updatedAt).getTime() <
          new Date(prev.updatedAt).getTime()
        ) {
          return prev; // stale event
        }
        return incoming;
      });
    },
    [initialTask.id],
  );

  useTaskSocket({ onUpdated: applyRemote, onDeleted: applyRemote });

  async function handleChange(next: TaskStatus) {
    setError(null);
    setPending(true);
    pendingRef.current = true;

    let previous: Task | undefined;
    setTask((prev) => {
      previous = prev;
      return { ...prev, status: next, updatedAt: new Date().toISOString() };
    });

    try {
      const confirmed = await updateTaskStatus(task.id, next);
      setTask(confirmed);
    } catch (err) {
      if (previous) setTask(previous);
      setError(err instanceof Error ? err.message : t.error);
    } finally {
      setPending(false);
      pendingRef.current = false;
    }
  }

  return (
    <div className="panel">
      <div className="detail-head">
        <Link href="/" className="back-link">
          {t.back}
        </Link>
        <button
          type="button"
          className="btn btn--ghost btn--sm"
          onClick={() => setEditing(true)}
        >
          {t.editButton}
        </button>
      </div>

      <div className="card-top">
        <h1 className="detail-title">{task.title}</h1>
        <PriorityBadge priority={task.priority} />
      </div>

      <section className="detail-section">
        <h2 className="detail-section-title">{t.descriptionHeading}</h2>
        {task.description ? (
          <p className="detail-description">{task.description}</p>
        ) : (
          <p className="detail-empty">{t.noDescription}</p>
        )}
      </section>

      <section className="detail-section">
        <h2 className="detail-section-title">{t.detailsHeading}</h2>
        <dl className="detail-fields">
          <dt>{t.statusLabel}</dt>
          <dd><StatusBadge status={task.status} /></dd>

          <dt>{t.priorityLabel}</dt>
          <dd><PriorityBadge priority={task.priority} /></dd>

          <dt>{t.tagsLabel}</dt>
          <dd>
            {task.tags.length > 0 ? (
              <div className="card-tags">
                {task.tags.map((tag) => (
                  <span className="tag" key={tag}>
                    #{tag}
                  </span>
                ))}
              </div>
            ) : (
              <span className="detail-empty">{t.noTags}</span>
            )}
          </dd>

          <dt>{t.createdLabel}</dt>
          <dd><LocalTime iso={task.createdAt} /></dd>

          <dt>{t.updatedLabel}</dt>
          <dd><LocalTime iso={task.updatedAt} /></dd>
        </dl>
      </section>

      {error ? <div className="form-error">{error}</div> : null}

      <section className="detail-section detail-section--action">
        <h2 className="detail-section-title">{t.changeStatus}</h2>
        {options.length === 0 ? (
          <span className="detail-empty">{t.terminal}</span>
        ) : (
          <Select
            value=""
            options={options.map((s) => ({ value: s, label: messages.columns[s] }))}
            onChange={(v) => handleChange(v as TaskStatus)}
            placeholder={pending ? t.updating : t.selectPlaceholder}
            ariaLabel={t.changeStatus}
            disabled={pending}
            width="auto"
          />
        )}
      </section>

      <EditTaskModal
        task={task}
        open={editing}
        onClose={() => setEditing(false)}
        onSaved={(updated) => setTask(updated)}
      />
    </div>
  );
}