import { useEffect, 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 { api } from '@/lib/api';
import { cn } from '@/lib/cn';
import type { Mission, Project, Task, TaskStatus } from '@/lib/types';
import { getErrorMessage } from './page-errors';

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>
  );
}

export function ProjectDetailPage(): ReactElement {
  const { id = '' } = useParams();
  const navigate = useNavigate();
  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) {
      setError('Project id is missing.');
      setLoading(false);
      return;
    }

    let cancelled = false;
    setLoading(true);
    setError(null);

    void Promise.all([
      api<Project>('/api/projects/' + id),
      api<Mission[]>('/api/missions').catch(() => [] as Mission[]),
      api<Task[]>('/api/tasks?projectId=' + id).catch(() => [] as Task[]),
    ])
      .then(([loadedProject, allMissions, loadedTasks]) => {
        if (cancelled) return;
        setProject(loadedProject);
        setMissions(allMissions.filter((mission) => mission.projectId === id));
        setTasks(loadedTasks);
      })
      .catch((caught: unknown) => {
        if (cancelled) return;
        setError(getErrorMessage(caught, 'Failed to load project.'));
      })
      .finally(() => {
        if (cancelled) return;
        setLoading(false);
      });

    return () => {
      cancelled = true;
    };
  }, [id]);

  if (loading) {
    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 (error || !project) {
    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">
          {error ?? 'Project not found.'}
        </div>
        <button
          type="button"
          onClick={() => navigate('/projects')}
          className="mt-4 w-fit text-sm underline"
        >
          Back to projects
        </button>
      </div>
    );
  }

  const filteredTasks =
    taskFilter === 'all' ? tasks : tasks.filter((task) => task.status === taskFilter);
  const prdContent = getPrdContent(project);
  const tabs: Array<{ id: Tab; label: string }> = [
    { id: 'overview', label: 'Overview' },
    { id: 'tasks', label: `Tasks (${tasks.length})` },
    { id: 'missions', label: `Missions (${missions.length})` },
    ...(prdContent ? [{ id: 'prd' as const, label: 'PRD' }] : []),
  ];

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

      <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((task) => task.status === 'done').length)}
          valueClass="text-success"
        />
        <StatCard
          label="In Progress"
          value={String(tasks.filter((task) => task.status === 'in-progress').length)}
          valueClass="text-blue-400"
        />
        <StatCard
          label="Blocked"
          value={String(tasks.filter((task) => task.status === 'blocked').length)}
          valueClass={tasks.some((task) => task.status === 'blocked') ? '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} missions={missions} tasks={tasks} />
      ) : null}

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

      {activeTab === 'missions' ? <MissionTimeline missions={missions} /> : 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[];
  tasks: Task[];
}): ReactElement {
  const recentTasks = [...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.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.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;
}