import { useState, type ReactElement } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
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';
import {
  PartialDataNotice,
  StaleDataNotice,
  UnavailableDataNotice,
} from '@/components/freshness/freshness-notices';
import { api } from '@/lib/api';
import { cn } from '@/lib/cn';
import type { Mission, Project, Task, TaskStatus } from '@/lib/types';
import {
  combineFreshness,
  UNKNOWN_VERDICT,
  verdictValue,
  type FreshSnapshot,
} from '@/lib/freshness/model';
import { describeFailure, useFreshCollection } from '@/lib/freshness/use-fresh-collection';
import {
  validateMissionCollection,
  validateProjectEntity,
  validateTaskCollection,
} from '@/lib/freshness/validators';

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

const projectStatusColors: 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',
};

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',
};

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

function TabButton({ id, label, activeTab, onClick }: TabButtonProps): 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>
  );
}

/** Remounts per project id so no state from one project renders for another. */
export function ProjectDetailPage(): ReactElement {
  const { id = '' } = useParams();
  return <ProjectDetail id={id} key={id} />;
}

function ProjectDetail({ id }: { id: string }): ReactElement {
  const navigate = useNavigate();
  const enabled = id.length > 0;

  // Primary collection gates the surface; missions and tasks are secondaries
  // whose failures degrade the surface to `partial` instead of rendering
  // empty healthy lists.
  const project = useFreshCollection<Project>({
    source: `gateway:/api/projects/${id}`,
    fetcher: (signal) => api<unknown>(`/api/projects/${id}`, { signal }),
    validate: validateProjectEntity,
    // No last-known restore: the entity carries workspace identity that
    // cannot be scope-checked before display (see ProjectsPage note).
    enabled,
  });
  const missions = useFreshCollection<Mission[]>({
    source: 'gateway:/api/missions',
    fetcher: (signal) => api<unknown>('/api/missions', { signal }),
    validate: validateMissionCollection,
    cacheKey: enabled ? 'missions' : null,
    enabled,
  });
  const tasks = useFreshCollection<Task[]>({
    source: `gateway:/api/tasks?projectId=${id}`,
    fetcher: (signal) => api<unknown>(`/api/tasks?projectId=${id}`, { signal }),
    validate: validateTaskCollection,
    cacheKey: enabled ? `project-tasks:${id}` : null,
    enabled,
  });

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

  const surface = combineFreshness(project.freshness, [missions.freshness, tasks.freshness]);
  const tasksVerified = tasks.freshness === 'current';
  const projectMissions = missions.data?.filter((mission) => mission.projectId === id) ?? null;

  const retryAll = (): void => {
    void Promise.all([project.revalidate(), missions.revalidate(), tasks.revalidate()]);
  };

  if (!enabled) {
    return (
      <div className="flex min-h-screen flex-col px-4 py-6 sm:px-6">
        <header className="mb-6 border-b px-1 pb-3">
          <h1 className="text-2xl font-semibold">Project</h1>
        </header>
        <div role="alert" className="rounded-lg border border-error/40 px-4 py-3 text-sm">
          Project id is missing.
        </div>
        <button
          type="button"
          onClick={() => navigate('/projects')}
          className="mt-4 w-fit text-sm underline"
        >
          Back to projects
        </button>
      </div>
    );
  }

  if (project.freshness === 'unknown') {
    return (
      <div className="flex min-h-screen flex-col px-4 py-6 sm:px-6">
        <header className="mb-6 border-b px-1 pb-3">
          <h1 className="text-2xl font-semibold">Project</h1>
        </header>
        <p className="py-16 text-center text-sm text-text-muted">Loading project...</p>
      </div>
    );
  }

  if (project.freshness === 'unavailable' || project.data === null) {
    return (
      <div className="flex min-h-screen flex-col px-4 py-6 sm:px-6">
        <header className="mb-6 border-b px-1 pb-3">
          <h1 className="text-2xl font-semibold">Project</h1>
        </header>
        <UnavailableDataNotice
          title="This project"
          detail={describeFailure(project.failure)}
          onRetry={retryAll}
        />
        <button
          type="button"
          onClick={() => navigate('/projects')}
          className="mt-4 w-fit text-sm underline"
        >
          Back to projects
        </button>
      </div>
    );
  }

  const projectTasks = tasks.data ?? null;
  const filteredTasks =
    projectTasks === null
      ? []
      : taskFilter === 'all'
        ? projectTasks
        : projectTasks.filter((task) => task.status === taskFilter);

  // Derived completion verdicts: unknown (never green) unless the task
  // collection is verified current.
  const doneCount = projectTasks?.filter((task) => task.status === 'done').length ?? 0;
  const inProgressCount = projectTasks?.filter((task) => task.status === 'in-progress').length ?? 0;
  const blockedCount = projectTasks?.filter((task) => task.status === 'blocked').length ?? 0;

  const prdContent = getPrdContent(project.data);
  const tabs: Array<{ id: Tab; label: string }> = [
    { id: 'overview', label: 'Overview' },
    {
      id: 'tasks',
      label: `Tasks (${projectTasks === null ? UNKNOWN_VERDICT : projectTasks.length})`,
    },
    {
      id: 'missions',
      label: `Missions (${projectMissions === null ? UNKNOWN_VERDICT : projectMissions.length})`,
    },
    ...(prdContent ? [{ id: 'prd' as const, label: 'PRD' }] : []),
  ];

  const staleSnapshot: FreshSnapshot<unknown> | null =
    project.freshness === 'stale'
      ? project.snapshot
      : missions.freshness === 'stale'
        ? missions.snapshot
        : tasks.freshness === 'stale'
          ? tasks.snapshot
          : null;
  const missingSections: string[] = [];
  if (missions.freshness === 'unavailable') missingSections.push('Missions');
  if (tasks.freshness === 'unavailable') missingSections.push('Tasks');

  return (
    <div data-freshness={surface} className="flex min-h-screen flex-col px-4 py-6 sm:px-6">
      <header className="mb-6 border-b px-1 pb-3">
        <nav className="mb-4 flex items-center gap-2 text-sm text-text-muted">
          <button
            type="button"
            onClick={() => navigate('/projects')}
            className="hover:text-text-secondary"
          >
            Projects
          </button>
          <span>/</span>
          <span className="text-text-primary">{project.data.name}</span>
        </nav>

        <div className="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.data.name}</h1>
              <span
                className={cn(
                  'rounded-full px-2 py-0.5 text-xs',
                  projectStatusColors[project.data.status] ?? 'bg-gray-600/20 text-gray-400',
                )}
              >
                {project.data.status}
              </span>
            </div>
            {project.data.description ? (
              <p className="mt-1 text-sm text-text-muted">{project.data.description}</p>
            ) : null}
            <p className="mt-2 text-xs text-text-muted">
              Created {new Date(project.data.createdAt).toLocaleDateString()} · Updated{' '}
              {new Date(project.data.updatedAt).toLocaleDateString()}
            </p>
          </div>
        </div>
      </header>

      {staleSnapshot !== null ? (
        <div className="mb-6">
          <StaleDataNotice label={staleSnapshot} onRetry={retryAll} />
        </div>
      ) : null}

      {missingSections.length > 0 ? (
        <div className="mb-6">
          <PartialDataNotice missing={missingSections} onRetry={retryAll} />
        </div>
      ) : null}

      <div className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
        <StatCard
          label="Tasks"
          value={projectTasks === null ? UNKNOWN_VERDICT : String(projectTasks.length)}
        />
        <StatCard
          label="Done"
          value={verdictValue(tasksVerified, String(doneCount))}
          valueClass={tasksVerified ? 'text-success' : undefined}
        />
        <StatCard
          label="In Progress"
          value={verdictValue(tasksVerified, String(inProgressCount))}
          valueClass={tasksVerified ? 'text-blue-400' : undefined}
        />
        <StatCard
          label="Blocked"
          value={verdictValue(tasksVerified, String(blockedCount))}
          valueClass={tasksVerified && blockedCount > 0 ? 'text-error' : undefined}
        />
      </div>

      <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>

      {activeTab === 'overview' ? (
        <OverviewTab project={project.data} missions={projectMissions} tasks={projectTasks} />
      ) : null}

      {activeTab === 'tasks' ? (
        <div>
          {projectTasks === null ? (
            <UnavailableDataNotice
              title="Tasks"
              detail={describeFailure(tasks.failure)}
              onRetry={retryAll}
            />
          ) : (
            <>
              <div className="mb-4">
                <TaskStatusSummary
                  tasks={projectTasks}
                  activeFilter={taskFilter}
                  onFilterChange={setTaskFilter}
                />
              </div>
              <TaskListView tasks={filteredTasks} onTaskClick={setSelectedTask} />
            </>
          )}
        </div>
      ) : null}

      {activeTab === 'missions' ? (
        projectMissions === null ? (
          <UnavailableDataNotice
            title="Missions"
            detail={describeFailure(missions.failure)}
            onRetry={retryAll}
          />
        ) : (
          <MissionTimeline missions={projectMissions} />
        )
      ) : null}

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

      {selectedTask ? (
        <TaskDetailModal task={selectedTask} onClose={() => setSelectedTask(null)} />
      ) : null}
    </div>
  );
}

function OverviewTab({
  project,
  missions,
  tasks,
}: {
  project: Project;
  missions: Mission[] | null;
  tasks: Task[] | null;
}): ReactElement {
  const recentTasks =
    tasks === null
      ? null
      : [...tasks]
          .sort(
            (left, right) =>
              new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime(),
          )
          .slice(0, 5);

  return (
    <div className="grid gap-6 lg:grid-cols-2">
      <section>
        <h2 className="mb-3 text-sm font-semibold text-text-secondary">Recent Tasks</h2>
        {recentTasks === null ? (
          <UnavailableDataNotice title="Tasks" />
        ) : 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) => (
              <div
                key={task.id}
                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>
            ))}
          </div>
        )}
      </section>

      <section>
        <h2 className="mb-3 text-sm font-semibold text-text-secondary">Missions</h2>
        {missions === null ? (
          <UnavailableDataNotice title="Missions" />
        ) : 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>

      {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>
      ) : null}
    </div>
  );
}

function StatCard({
  label,
  value,
  valueClass,
}: {
  label: string;
  value: string;
  valueClass?: string;
}): 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;
}