import { useCallback, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { goalsApi } from "../api/goals";
import { projectsApi } from "../api/projects";
import { useApi } from "../hooks/useApi";
import { usePanel } from "../context/PanelContext";
import { useCompany } from "../context/CompanyContext";
import { useBreadcrumbs } from "../context/BreadcrumbContext";
import { GoalProperties } from "../components/GoalProperties";
import { GoalTree } from "../components/GoalTree";
import { StatusBadge } from "../components/StatusBadge";
import { EntityRow } from "../components/EntityRow";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import type { Goal, Project } from "@paperclip/shared";

export function GoalDetail() {
  const { goalId } = useParams<{ goalId: string }>();
  const { selectedCompanyId } = useCompany();
  const { openPanel, closePanel } = usePanel();
  const { setBreadcrumbs } = useBreadcrumbs();
  const navigate = useNavigate();

  const goalFetcher = useCallback(() => {
    if (!goalId) return Promise.reject(new Error("No goal ID"));
    return goalsApi.get(goalId);
  }, [goalId]);

  const allGoalsFetcher = useCallback(() => {
    if (!selectedCompanyId) return Promise.resolve([] as Goal[]);
    return goalsApi.list(selectedCompanyId);
  }, [selectedCompanyId]);

  const projectsFetcher = useCallback(() => {
    if (!selectedCompanyId) return Promise.resolve([] as Project[]);
    return projectsApi.list(selectedCompanyId);
  }, [selectedCompanyId]);

  const { data: goal, loading, error } = useApi(goalFetcher);
  const { data: allGoals } = useApi(allGoalsFetcher);
  const { data: allProjects } = useApi(projectsFetcher);

  const childGoals = (allGoals ?? []).filter((g) => g.parentId === goalId);
  const linkedProjects = (allProjects ?? []).filter((p) => p.goalId === goalId);

  useEffect(() => {
    setBreadcrumbs([
      { label: "Goals", href: "/goals" },
      { label: goal?.title ?? goalId ?? "Goal" },
    ]);
  }, [setBreadcrumbs, goal, goalId]);

  useEffect(() => {
    if (goal) {
      openPanel(<GoalProperties goal={goal} />);
    }
    return () => closePanel();
  }, [goal]); // eslint-disable-line react-hooks/exhaustive-deps

  if (loading) return <p className="text-sm text-muted-foreground">Loading...</p>;
  if (error) return <p className="text-sm text-destructive">{error.message}</p>;
  if (!goal) return null;

  return (
    <div className="space-y-6">
      <div>
        <div className="flex items-center gap-2">
          <span className="text-xs uppercase text-muted-foreground">{goal.level}</span>
          <StatusBadge status={goal.status} />
        </div>
        <h2 className="text-xl font-bold mt-1">{goal.title}</h2>
        {goal.description && (
          <p className="text-sm text-muted-foreground mt-1">{goal.description}</p>
        )}
      </div>

      <Tabs defaultValue="children">
        <TabsList>
          <TabsTrigger value="children">Sub-Goals ({childGoals.length})</TabsTrigger>
          <TabsTrigger value="projects">Projects ({linkedProjects.length})</TabsTrigger>
        </TabsList>

        <TabsContent value="children" className="mt-4">
          {childGoals.length === 0 ? (
            <p className="text-sm text-muted-foreground">No sub-goals.</p>
          ) : (
            <GoalTree
              goals={childGoals}
              onSelect={(g) => navigate(`/goals/${g.id}`)}
            />
          )}
        </TabsContent>

        <TabsContent value="projects" className="mt-4">
          {linkedProjects.length === 0 ? (
            <p className="text-sm text-muted-foreground">No linked projects.</p>
          ) : (
            <div className="border border-border rounded-md">
              {linkedProjects.map((project) => (
                <EntityRow
                  key={project.id}
                  title={project.name}
                  subtitle={project.description ?? undefined}
                  onClick={() => navigate(`/projects/${project.id}`)}
                  trailing={<StatusBadge status={project.status} />}
                />
              ))}
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}