fusion/packages/dashboard/app/components/TaskDetailModal.tsx

import { useCallback, useEffect, useRef, useState } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import type { Task, TaskDetail, TaskAttachment, Column, MergeResult } from "@hai/core";
import { COLUMN_LABELS, VALID_TRANSITIONS } from "@hai/core";
import { uploadAttachment, deleteAttachment } from "../api";
import type { ToastType } from "../hooks/useToast";

function formatTimestamp(iso: string): string {
  const date = new Date(iso);
  const now = new Date();
  const diffMs = now.getTime() - date.getTime();
  const diffMin = Math.floor(diffMs / 60000);
  const diffHr = Math.floor(diffMin / 60);
  const diffDay = Math.floor(diffHr / 24);

  if (diffMin < 1) return "just now";
  if (diffMin < 60) return `${diffMin}m ago`;
  if (diffHr < 24) return `${diffHr}h ago`;
  if (diffDay < 7) return `${diffDay}d ago`;
  return date.toLocaleDateString();
}

function formatBytes(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

interface TaskDetailModalProps {
  task: TaskDetail;
  onClose: () => void;
  onMoveTask: (id: string, column: Column) => Promise<Task>;
  onDeleteTask: (id: string) => Promise<Task>;
  onMergeTask: (id: string) => Promise<MergeResult>;
  addToast: (message: string, type?: ToastType) => void;
}

export function TaskDetailModal({
  task,
  onClose,
  onMoveTask,
  onDeleteTask,
  onMergeTask,
  addToast,
}: TaskDetailModalProps) {
  const [attachments, setAttachments] = useState<TaskAttachment[]>(task.attachments || []);
  const [uploading, setUploading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", handleKey);
    return () => document.removeEventListener("keydown", handleKey);
  }, [onClose]);

  const handleOverlayClick = useCallback(
    (e: React.MouseEvent) => {
      if (e.target === e.currentTarget) onClose();
    },
    [onClose],
  );

  const handleMove = useCallback(
    async (column: Column) => {
      try {
        await onMoveTask(task.id, column);
        onClose();
        addToast(`Moved to ${COLUMN_LABELS[column]}`, "success");
      } catch (err: any) {
        addToast(err.message, "error");
      }
    },
    [task.id, onMoveTask, onClose, addToast],
  );

  const handleDelete = useCallback(async () => {
    if (!confirm(`Delete ${task.id}?`)) return;
    try {
      await onDeleteTask(task.id);
      onClose();
      addToast(`Deleted ${task.id}`, "info");
    } catch (err: any) {
      addToast(err.message, "error");
    }
  }, [task.id, onDeleteTask, onClose, addToast]);

  const handleMerge = useCallback(() => {
    if (!confirm(`Merge ${task.id} into the current branch?`)) return;
    onClose();
    addToast(`Merging ${task.id}...`, "info");
    onMergeTask(task.id)
      .then((result) => {
        const msg = result.merged
          ? `Merged ${task.id} (branch: ${result.branch})`
          : `Closed ${task.id} (${result.error || "no branch to merge"})`;
        addToast(msg, "success");
      })
      .catch((err: any) => {
        addToast(err.message, "error");
      });
  }, [task.id, onMergeTask, onClose, addToast]);

  const handleUpload = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setUploading(true);
    try {
      const attachment = await uploadAttachment(task.id, file);
      setAttachments((prev) => [...prev, attachment]);
      addToast("Screenshot attached", "success");
    } catch (err: any) {
      addToast(err.message, "error");
    } finally {
      setUploading(false);
      if (fileInputRef.current) fileInputRef.current.value = "";
    }
  }, [task.id, addToast]);

  const handleDeleteAttachment = useCallback(async (filename: string) => {
    try {
      await deleteAttachment(task.id, filename);
      setAttachments((prev) => prev.filter((a) => a.filename !== filename));
      addToast("Attachment deleted", "info");
    } catch (err: any) {
      addToast(err.message, "error");
    }
  }, [task.id, addToast]);

  const transitions = VALID_TRANSITIONS[task.column] || [];

  return (
    <div className="modal-overlay open" onClick={handleOverlayClick}>
      <div className="modal modal-lg">
        <div className="modal-header">
          <div className="detail-title-row">
            <span className="detail-id">{task.id}</span>
            <span className={`detail-column-badge badge-${task.column}`}>
              {COLUMN_LABELS[task.column]}
            </span>
          </div>
          <button className="modal-close" onClick={onClose}>
            &times;
          </button>
        </div>
        <div className="detail-body">
          <h2 className="detail-title">{task.title || task.id}</h2>
          <div className="detail-meta">
            Created {new Date(task.createdAt).toLocaleDateString()} · Updated{" "}
            {new Date(task.updatedAt).toLocaleDateString()}
          </div>
          <div className="detail-section">
            {task.prompt ? (
              <div className="markdown-body">
                <ReactMarkdown remarkPlugins={[remarkGfm]}>
                  {task.prompt}
                </ReactMarkdown>
              </div>
            ) : (
              <div className="detail-prompt">(no prompt)</div>
            )}
          </div>
          <div className="detail-section">
            <h4>Attachments</h4>
            {attachments.length > 0 ? (
              <div style={{ display: "flex", flexWrap: "wrap", gap: "12px", marginBottom: "8px" }}>
                {attachments.map((a) => (
                  <div
                    key={a.filename}
                    style={{
                      position: "relative",
                      border: "1px solid var(--border, #333)",
                      borderRadius: "6px",
                      padding: "4px",
                      background: "var(--bg-secondary, #1a1a2e)",
                    }}
                  >
                    <a
                      href={`/api/tasks/${task.id}/attachments/${a.filename}`}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <img
                        src={`/api/tasks/${task.id}/attachments/${a.filename}`}
                        alt={a.originalName}
                        style={{ maxWidth: "150px", maxHeight: "100px", display: "block", borderRadius: "4px" }}
                      />
                    </a>
                    <div style={{ fontSize: "11px", marginTop: "4px", opacity: 0.7 }}>
                      {a.originalName} ({formatBytes(a.size)})
                    </div>
                    <button
                      onClick={() => handleDeleteAttachment(a.filename)}
                      style={{
                        position: "absolute",
                        top: "2px",
                        right: "2px",
                        background: "rgba(0,0,0,0.6)",
                        color: "#fff",
                        border: "none",
                        borderRadius: "50%",
                        width: "20px",
                        height: "20px",
                        cursor: "pointer",
                        fontSize: "12px",
                        lineHeight: "20px",
                        textAlign: "center",
                        padding: 0,
                      }}
                      title="Delete attachment"
                    >
                      ×
                    </button>
                  </div>
                ))}
              </div>
            ) : (
              <div style={{ opacity: 0.5, marginBottom: "8px" }}>(no attachments)</div>
            )}
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              onChange={handleUpload}
              style={{ display: "none" }}
            />
            <button
              className="btn btn-sm"
              onClick={() => fileInputRef.current?.click()}
              disabled={uploading}
            >
              {uploading ? "Uploading…" : "Attach Screenshot"}
            </button>
          </div>
          {task.dependencies && task.dependencies.length > 0 && (
            <div className="detail-deps">
              <h4>Dependencies</h4>
              <ul className="detail-dep-list">
                {task.dependencies.map((dep) => (
                  <li key={dep}>{dep}</li>
                ))}
              </ul>
            </div>
          )}
          <div className="detail-section detail-activity">
            <h4>Activity</h4>
            {task.log && task.log.length > 0 ? (
              <div className="detail-activity-list">
                {[...task.log].reverse().map((entry, i) => (
                  <div key={i} className="detail-log-entry">
                    <div className="detail-log-header">
                      <span className="detail-log-timestamp">
                        {formatTimestamp(entry.timestamp)}
                      </span>
                      <span className="detail-log-action">{entry.action}</span>
                    </div>
                    {entry.outcome && (
                      <div className="detail-log-outcome">{entry.outcome}</div>
                    )}
                  </div>
                ))}
              </div>
            ) : (
              <div className="detail-log-empty">(no activity)</div>
            )}
          </div>
        </div>
        <div className="modal-actions">
          <button className="btn btn-danger btn-sm" onClick={handleDelete}>
            Delete
          </button>
          <div style={{ flex: 1 }} />
          {task.column === "in-review" ? (
            <>
              <button className="btn btn-sm" onClick={() => handleMove("in-progress")}>
                Back to In Progress
              </button>
              <button className="btn btn-primary btn-sm" onClick={handleMerge}>
                Merge &amp; Close
              </button>
            </>
          ) : (
            transitions.map((col) => (
              <button key={col} className="btn btn-sm" onClick={() => handleMove(col)}>
                Move to {COLUMN_LABELS[col]}
              </button>
            ))
          )}
        </div>
      </div>
    </div>
  );
}