stack/apps/web/src/app/(dashboard)/projects/[id]/page.tsx

'use client';

import { useCallback, useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { api } from '@/lib/api';
import { cn } from '@/lib/cn';
import type { Mission, Project, Task, TaskStatus } from '@/lib/types';
import { MissionTimeline } from '@/components/projects/mission-timeline';
import { PrdViewer } from '@/components/projects/prd-viewer';
import { TaskDetailModal } from '@/components/tasks/task-detail-modal';
import { TaskListView } from '@/components/tasks/task-list-view';
import { TaskStatusSummary } from '@/components/tasks/task-status-summary';

type Tab = 'overview' | 'tasks' | 'missions' | 'prd';

const statusColors: Record<string, string> = {
  active: 'bg-success/20 text-success',
  paused: 'bg-warning/20 text-warning',
  completed: 'bg-blue-600/20 text-blue-400',
  archived: 'bg-gray-600/20 text-gray-400',
};

interface TabButtonProps {
  id: Tab;
  label: string;
  activeTab: Tab;
  onClick: (tab: Tab) => void;
}

function TabButton({ id, label, activeTab, onClick }: TabButtonProps): React.ReactElement {
  return (
    <button
      type="button"
      onClick={() => onClick(id)}
      className={cn(
        'border-b-2 px-4 py-2 text-sm transition-colors',
        activeTab === id
          ? 'border-text-primary text-text-primary'
          : 'border-transparent text-text-muted hover:text-text-secondary',
      )}
    >
      {label}
    </button>
  );
}

export default function ProjectDetailPage(): React.ReactElement {
  const params = useParams();
  const router = useRouter();
  const id = typeof params['id'] === 'string' ? params['id'] : '';

  const [project, setProject] = useState<Project | null>(null);
  const [missions, setMissions] = useState<Mission[]>([]);
  const [tasks, setTasks] = useState<Task[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [activeTab, setActiveTab] = useState<Tab>('overview');
  const [taskFilter, setTaskFilter] = useState<TaskStatus | 'all'>('all');
  const [selectedTask, setSelectedTask] = useState<Task | null>(null);

  useEffect(() => {
    if (!id) return;

    setLoading(true);
    setError(null);

    Promise.all([
      api<Project>(`/api/projects/${id}`),
      api<Mission[]>('/api/missions').catch(() => [] as Mission[]),
      api<Task[]>(`/api/tasks?projectId=${id}`).catch(() => [] as Task[]),
    ])
      .then(([proj, allMissions, tks]) => {
        setProject(proj);
        setMissions(allMissions.filter((m) => m.projectId === id));
        setTasks(tks);
      })
      .catch((err: Error) => {
        setError(err.message ?? 'Failed to load project');
      })
      .finally(() => setLoading(false));
  }, [id]);

  const handleTaskClick = useCallback((task: Task) => {
    setSelectedTask(task);
  }, []);

  const handleCloseTaskModal = useCallback(() => {
    setSelectedTask(null);
  }, []);

  if (loading) {
    return (
      <div className="py-16 text-center">
        <p className="text-sm text-text-muted">Loading project...</p>
      </div>
    );
  }

  if (error || !project) {
    return (
      <div className="py-16 text-center">
        <p className="text-sm text-error">{error ?? 'Project not found'}</p>
        <button
          type="button"
          onClick={() => router.push('/projects')}
          className="mt-4 text-sm text-text-muted underline hover:text-text-secondary"
        >
          Back to projects
        </button>
      </div>
    );
  }

  const filteredTasks = taskFilter === 'all' ? tasks : tasks.filter((t) => t.status === taskFilter);

  const prdContent = getPrdContent(project);
  const hasPrd = Boolean(prdContent);

  const tabs: { id: Tab; label: string }[] = [
    { id: 'overview', label: 'Overview' },
    { id: 'tasks', label: `Tasks (${tasks.length})` },
    { id: 'missions', label: `Missions (${missions.length})` },
    ...(hasPrd ? [{ id: 'prd' as Tab, label: 'PRD' }] : []),
  ];

  return (
    <div>
      {/* Breadcrumb */}
      <nav className="mb-4 flex items-center gap-2 text-sm text-text-muted">
        <button
          type="button"
          onClick={() => router.push('/projects')}
          className="hover:text-text-secondary"
        >
          Projects
        </button>
        <span>/</span>
        <span className="text-text-primary">{project.name}</span>
      </nav>

      {/* Project header */}
      <div className="mb-6 flex items-start justify-between gap-4">
        <div>
          <div className="flex items-center gap-3">
            <h1 className="text-2xl font-semibold text-text-primary">{project.name}</h1>
            <span
              className={cn(
                'rounded-full px-2 py-0.5 text-xs',
                statusColors[project.status] ?? 'bg-gray-600/20 text-gray-400',
              )}
            >
              {project.status}
            </span>
          </div>
          {project.description && (
            <p className="mt-1 text-sm text-text-muted">{project.description}</p>
          )}
          <p className="mt-2 text-xs text-text-muted">
            Created {new Date(project.createdAt).toLocaleDateString()} · Updated{' '}
            {new Date(project.updatedAt).toLocaleDateString()}
          </p>
        </div>
      </div>

      {/* Stats bar */}
      <div className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
        <StatCard label="Tasks" value={String(tasks.length)} />
        <StatCard
          label="Done"
          value={String(tasks.filter((t) => t.status === 'done').length)}
          valueClass="text-success"
        />
        <StatCard
          label="In Progress"
          value={String(tasks.filter((t) => t.status === 'in-progress').length)}
          valueClass="text-blue-400"
        />
        <StatCard
          label="Blocked"
          value={String(tasks.filter((t) => t.status === 'blocked').length)}
          valueClass={tasks.some((t) => t.status === 'blocked') ? 'text-error' : undefined}
        />
      </div>

      {/* Tabs */}
      <div className="mb-6 flex gap-0 border-b border-surface-border">
        {tabs.map((tab) => (
          <TabButton
            key={tab.id}
            id={tab.id}
            label={tab.label}
            activeTab={activeTab}
            onClick={setActiveTab}
          />
        ))}
      </div>

      {/* Tab content */}
      {activeTab === 'overview' && (
        <OverviewTab project={project} missions={missions} tasks={tasks} />
      )}

      {activeTab === 'tasks' && (
        <div>
          <div className="mb-4">
            <TaskStatusSummary
              tasks={tasks}
              activeFilter={taskFilter}
              onFilterChange={setTaskFilter}
            />
          </div>
          <TaskListView tasks={filteredTasks} onTaskClick={handleTaskClick} />
        </div>
      )}

      {activeTab === 'missions' && <MissionTimeline missions={missions} />}

      {activeTab === 'prd' && prdContent && (
        <div className="rounded-lg border border-surface-border bg-surface-card p-6">
          <PrdViewer content={prdContent} />
        </div>
      )}

      {/* Task detail modal */}
      {selectedTask && <TaskDetailModal task={selectedTask} onClose={handleCloseTaskModal} />}
    </div>
  );
}

interface OverviewTabProps {
  project: Project;
  missions: Mission[];
  tasks: Task[];
}

function OverviewTab({ project, missions, tasks }: OverviewTabProps): React.ReactElement {
  const recentTasks = [...tasks]
    .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
    .slice(0, 5);

  return (
    <div className="grid gap-6 lg:grid-cols-2">
      {/* Recent tasks */}
      <section>
        <h2 className="mb-3 text-sm font-semibold text-text-secondary">Recent Tasks</h2>
        {recentTasks.length === 0 ? (
          <div className="rounded-lg border border-surface-border bg-surface-card p-4 text-center">
            <p className="text-sm text-text-muted">No tasks yet</p>
          </div>
        ) : (
          <div className="space-y-2">
            {recentTasks.map((task) => (
              <TaskSummaryRow key={task.id} task={task} />
            ))}
          </div>
        )}
      </section>

      {/* Mission summary */}
      <section>
        <h2 className="mb-3 text-sm font-semibold text-text-secondary">Missions</h2>
        {missions.length === 0 ? (
          <div className="rounded-lg border border-surface-border bg-surface-card p-4 text-center">
            <p className="text-sm text-text-muted">No missions yet</p>
          </div>
        ) : (
          <MissionTimeline missions={missions.slice(0, 4)} />
        )}
      </section>

      {/* Metadata */}
      {project.metadata && Object.keys(project.metadata).length > 0 && (
        <section className="lg:col-span-2">
          <h2 className="mb-3 text-sm font-semibold text-text-secondary">Project Metadata</h2>
          <div className="rounded-lg border border-surface-border bg-surface-card p-4">
            <pre className="overflow-x-auto text-xs text-text-muted">
              {JSON.stringify(project.metadata, null, 2)}
            </pre>
          </div>
        </section>
      )}
    </div>
  );
}

const taskStatusColors: Record<string, string> = {
  'not-started': 'bg-gray-600/20 text-gray-300',
  'in-progress': 'bg-blue-600/20 text-blue-400',
  blocked: 'bg-error/20 text-error',
  done: 'bg-success/20 text-success',
  cancelled: 'bg-gray-600/20 text-gray-500',
};

function TaskSummaryRow({ task }: { task: Task }): React.ReactElement {
  return (
    <div className="flex items-center justify-between gap-2 rounded-lg border border-surface-border bg-surface-card px-3 py-2">
      <span className="truncate text-sm text-text-primary">{task.title}</span>
      <span
        className={cn(
          'shrink-0 rounded-full px-2 py-0.5 text-xs',
          taskStatusColors[task.status] ?? 'bg-gray-600/20 text-gray-400',
        )}
      >
        {task.status}
      </span>
    </div>
  );
}

function StatCard({
  label,
  value,
  valueClass,
}: {
  label: string;
  value: string;
  valueClass?: string;
}): React.ReactElement {
  return (
    <div className="rounded-lg border border-surface-border bg-surface-card p-3">
      <p className="text-xs text-text-muted">{label}</p>
      <p className={cn('mt-1 text-lg font-semibold', valueClass ?? 'text-text-primary')}>{value}</p>
    </div>
  );
}

function getPrdContent(project: Project): string | null {
  if (!project.metadata) return null;

  const prd = project.metadata['prd'];
  if (typeof prd === 'string' && prd.trim().length > 0) return prd;

  const prdContent = project.metadata['prdContent'];
  if (typeof prdContent === 'string' && prdContent.trim().length > 0) return prdContent;

  return null;
}