import { toast } from "@xtablo/shared";
import type { UserTablo } from "@xtablo/shared/types/tablos.types";
import { Button } from "@xtablo/ui/components/button";
import { Input } from "@xtablo/ui/components/input";
import { TypographyH3, TypographyMuted, TypographyP } from "@xtablo/ui/components/typography";
import { ArrowDown, ArrowUp, Check, Edit2, Loader2, Plus, Trash2, X } from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import {
  useCreateEtape,
  useDeleteEtape,
  useReorderEtapes,
  useTabloEtapes,
  useTasksByTablo,
  useUpdateEtape,
} from "../hooks/tasks";
import { useUser } from "../providers/UserStoreProvider";
import { getEtapeProgressStats } from "../utils/etapeProgress";
import { TabloHeaderActions } from "./TabloHeaderActions";

interface TabloOverviewSectionProps {
  tablo: UserTablo;
  isAdmin: boolean;
}

export const TabloOverviewSection = ({ tablo, isAdmin }: TabloOverviewSectionProps) => {
  const { t } = useTranslation();
  const currentUser = useUser();
  const { data: etapes = [], isLoading: isLoadingEtapes } = useTabloEtapes(tablo.id);
  const { data: tasks = [] } = useTasksByTablo(tablo.id, { assigneeId: currentUser.id });
  const createEtape = useCreateEtape();
  const updateEtape = useUpdateEtape();
  const deleteEtape = useDeleteEtape();
  const reorderEtapes = useReorderEtapes();

  const [newEtapeTitle, setNewEtapeTitle] = useState("");
  const [editingEtapeId, setEditingEtapeId] = useState<string | null>(null);
  const [editingTitle, setEditingTitle] = useState("");

  const canManageEtapes = isAdmin;

  const sortedEtapes = useMemo(() => [...etapes].sort((a, b) => a.position - b.position), [etapes]);

  // Calculate overall tablo progress from etape statuses
  const overallProgress = useMemo(() => {
    return getEtapeProgressStats(etapes);
  }, [etapes]);

  // Calculate task counts per etape
  const getEtapeTaskCounts = useCallback(
    (etapeId: string) => {
      const etapeTasks = tasks.filter((task) => task.parent_task_id === etapeId);
      const total = etapeTasks.length;
      const done = etapeTasks.filter((task) => task.status === "done").length;
      const ongoing = etapeTasks.filter(
        (task) => task.status === "in_progress" || task.status === "in_review"
      ).length;
      return { total, done, ongoing };
    },
    [tasks]
  );

  const handleCreateEtape = async () => {
    const title = newEtapeTitle.trim();
    if (!title) {
      toast.add({
        title: t("common:errors.error"),
        description: t("tablo:etape.nameRequired"),
        type: "error",
      });
      return;
    }

    await createEtape.mutateAsync({
      tabloId: tablo.id,
      title,
      position: etapes.length,
    });
    setNewEtapeTitle("");
  };

  const startEditing = useCallback((etapeId: string, currentTitle: string) => {
    setEditingEtapeId(etapeId);
    setEditingTitle(currentTitle);
  }, []);

  const handleUpdateEtape = async () => {
    if (!editingEtapeId) return;
    const title = editingTitle.trim();
    if (!title) return;

    await updateEtape.mutateAsync({
      id: editingEtapeId,
      tabloId: tablo.id,
      title,
    });
    setEditingEtapeId(null);
    setEditingTitle("");
  };

  const handleCancelEdit = () => {
    setEditingEtapeId(null);
    setEditingTitle("");
  };

  const handleDeleteEtape = async (etapeId: string, etapeTitle: string) => {
    if (!window.confirm(t("tablo:etape.deleteConfirm", { name: etapeTitle }))) {
      return;
    }

    await deleteEtape.mutateAsync({ id: etapeId, tabloId: tablo.id });
  };

  const handleReorder = async (index: number, direction: "up" | "down") => {
    const nextIndex = direction === "up" ? index - 1 : index + 1;
    if (nextIndex < 0 || nextIndex >= sortedEtapes.length) return;

    const reordered = [...sortedEtapes];
    const [moved] = reordered.splice(index, 1);
    reordered.splice(nextIndex, 0, moved);

    const updates = reordered.map((etape, position) => ({
      id: etape.id,
      position,
    }));

    await reorderEtapes.mutateAsync({ tabloId: tablo.id, updates });
  };

  const EtapeList = () => {
    if (isLoadingEtapes) {
      return (
        <div className="flex items-center justify-center py-10">
          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
        </div>
      );
    }

    if (!sortedEtapes.length) {
      return (
        <div className="rounded-lg border border-dashed border-border p-6 text-center">
          <TypographyP className="text-muted-foreground">{t("tablo:etape.noEtapes")}</TypographyP>
          {canManageEtapes ? (
            <TypographyP className="text-sm text-muted-foreground mt-2">
              {t("tablo:etape.createFirstEtape")}
            </TypographyP>
          ) : (
            <TypographyP className="text-sm text-muted-foreground mt-2">
              {t("tablo:etape.onlyOwnerCanAdd")}
            </TypographyP>
          )}
        </div>
      );
    }

    return (
      <ul className="space-y-3">
        {sortedEtapes.map((etape, index) => {
          const isEditing = editingEtapeId === etape.id;
          return (
            <li key={etape.id} className="flex items-start gap-3 rounded-lg border px-4 py-3">
              {canManageEtapes && (
                <div className="flex flex-col gap-1 pt-1">
                  <Button
                    size="icon"
                    variant="ghost"
                    disabled={index === 0 || reorderEtapes.isPending}
                    onClick={() => handleReorder(index, "up")}
                  >
                    <ArrowUp className="h-4 w-4" />
                  </Button>
                  <Button
                    size="icon"
                    variant="ghost"
                    disabled={index === sortedEtapes.length - 1 || reorderEtapes.isPending}
                    onClick={() => handleReorder(index, "down")}
                  >
                    <ArrowDown className="h-4 w-4" />
                  </Button>
                </div>
              )}

              <div className="flex-1">
                {isEditing ? (
                  <div className="flex flex-col gap-2">
                    <Input
                      value={editingTitle}
                      onChange={(event) => setEditingTitle(event.target.value)}
                      placeholder={t("tablo:etape.namePlaceholder")}
                      autoFocus
                    />
                    <div className="flex items-center gap-2">
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={handleCancelEdit}
                        disabled={updateEtape.isPending}
                      >
                        <X className="mr-2 h-4 w-4" />
                        {t("common:actions.cancel")}
                      </Button>
                      <Button
                        size="sm"
                        onClick={handleUpdateEtape}
                        disabled={updateEtape.isPending}
                      >
                        {updateEtape.isPending ? (
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        ) : (
                          <Check className="mr-2 h-4 w-4" />
                        )}
                        {t("common:actions.save")}
                      </Button>
                    </div>
                  </div>
                ) : (
                  <>
                    <TypographyP className="text-base font-medium">{etape.title}</TypographyP>
                    <TypographyMuted className="text-xs opacity-70">
                      {t("tablo:etape.stepNumber", { number: etape.position + 1 })}
                    </TypographyMuted>
                    {(() => {
                      const { total, done, ongoing } = getEtapeTaskCounts(etape.id);
                      return (
                        <div className="flex gap-3 mt-2 text-xs">
                          <span className="text-muted-foreground">
                            <span className="font-medium text-foreground">{total}</span>{" "}
                            {t(
                              `tablo:tasks.task_${total === 0 || total > 1 ? "plural" : "singular"}`
                            )}
                          </span>
                          {ongoing > 0 && (
                            <span className="text-blue-600 dark:text-blue-400">
                              <span className="font-medium">{ongoing}</span>{" "}
                              {t("tablo:tasks.inProgress")}
                            </span>
                          )}
                          {done > 0 && (
                            <span className="text-green-600 dark:text-green-400">
                              <span className="font-medium">{done}</span>{" "}
                              {t(`tablo:tasks.completed_${done > 1 ? "plural" : "singular"}`)}
                            </span>
                          )}
                        </div>
                      );
                    })()}
                  </>
                )}
              </div>

              {canManageEtapes && !isEditing && (
                <div className="flex items-center gap-2">
                  <Button
                    size="icon"
                    variant="ghost"
                    onClick={() => startEditing(etape.id, etape.title)}
                  >
                    <Edit2 className="h-4 w-4" />
                  </Button>
                  <Button
                    size="icon"
                    variant="ghost"
                    onClick={() => handleDeleteEtape(etape.id, etape.title)}
                    disabled={deleteEtape.isPending}
                  >
                    {deleteEtape.isPending ? (
                      <Loader2 className="h-4 w-4 animate-spin" />
                    ) : (
                      <Trash2 className="h-4 w-4 text-destructive" />
                    )}
                  </Button>
                </div>
              )}
            </li>
          );
        })}
      </ul>
    );
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-start">
        <div>
          <TypographyH3 className="text-3xl font-bold text-foreground">
            {t("tablo:overview.title")}
          </TypographyH3>
          <TypographyMuted className="text-muted-foreground mt-1">
            {t("tablo:overview.description")}
          </TypographyMuted>
        </div>
        <TabloHeaderActions tablo={tablo} isAdmin={isAdmin} />
      </div>

      {!canManageEtapes && (
        <div className="mt-4 rounded-md bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
          {t("tablo:etape.onlyOwnerCanModify")}
        </div>
      )}

      {/* Overall Progress */}
      {overallProgress.total > 0 && (
        <div className="bg-card border border-border rounded-lg p-4">
          <div className="flex items-center justify-between mb-3">
            <div>
              <TypographyP className="text-sm font-medium text-foreground">
                {t("tablo:overview.overallProgress")}
              </TypographyP>
              <TypographyMuted className="text-xs">
                {t("tablo:overview.progressSummary", {
                  done: overallProgress.done,
                  total: overallProgress.total,
                })}
              </TypographyMuted>
            </div>
            <div className="text-2xl font-bold text-primary">{overallProgress.donePercentage}%</div>
          </div>
          <div className="relative h-3 w-full overflow-hidden rounded-full bg-muted">
            <div
              className="absolute inset-y-0 left-0 bg-blue-500/40 transition-all"
              style={{ width: `${overallProgress.startedPercentage}%` }}
            />
            <div
              className="absolute inset-y-0 left-0 bg-green-500 transition-all"
              style={{ width: `${overallProgress.donePercentage}%` }}
            />
          </div>
          <div className="mt-2 flex items-center gap-4 text-xs">
            <span className="text-blue-600 dark:text-blue-400">
              {t("tablo:overview.inProgressSummary", {
                started: overallProgress.started,
                total: overallProgress.total,
              })}
            </span>
            <span className="text-green-600 dark:text-green-400">
              {t("tablo:overview.progressSummary", {
                done: overallProgress.done,
                total: overallProgress.total,
              })}
            </span>
          </div>
        </div>
      )}

      <div className="mt-6">
        <EtapeList />
      </div>

      {canManageEtapes && (
        <div className="flex w-full sm:w-auto items-center gap-2">
          <Input
            value={newEtapeTitle}
            onChange={(event) => setNewEtapeTitle(event.target.value)}
            placeholder={t("tablo:etape.namePlaceholder")}
            className="h-9 sm:w-64"
          />
          <Button onClick={handleCreateEtape} disabled={createEtape.isPending}>
            <Plus className="h-4 w-4" />
            {t("tablo:etape.addNew")}
          </Button>
        </div>
      )}
    </div>
  );
};
