"use client";

import { useMemo, useState } from "react";
import { ConfirmModal } from "@/components/confirm-modal/confirm-modal";
import { HabitCard } from "@/features/habits/components/habit-card";
import { HabitSheet } from "@/features/habits/components/habit-sheet";
import { HabitsFab } from "@/features/habits/components/habits-fab";
import { HabitsHeader } from "@/features/habits/components/habits-header";
import { habitsDict } from "@/features/habits/dict";
import {
  useCreateHabitMutation,
  useDeleteHabitMutation,
  useHabits,
  useUpdateHabitMutation,
} from "@/features/habits/hooks/use-habits";
import type { Habit, HabitFormValues } from "@/features/habits/types";
import { formValuesToPayload } from "@/features/habits/utils/habit-helpers";

export function HabitsPageContent() {
  const [sheetOpen, setSheetOpen] = useState(false);
  const [sheetMode, setSheetMode] = useState<"create" | "edit">("create");
  const [activeHabit, setActiveHabit] = useState<Habit | null>(null);
  const [habitToDelete, setHabitToDelete] = useState<Habit | null>(null);

  const { data: habits = [], isLoading } = useHabits();
  const createHabitMutation = useCreateHabitMutation();
  const updateHabitMutation = useUpdateHabitMutation();
  const deleteHabitMutation = useDeleteHabitMutation();

  const visibleHabits = useMemo(
    () => habits.filter((habit) => !habit.isArchived),
    [habits],
  );

  const openCreateSheet = () => {
    setSheetMode("create");
    setActiveHabit(null);
    setSheetOpen(true);
  };

  const openEditSheet = (habit: Habit) => {
    setSheetMode("edit");
    setActiveHabit(habit);
    setSheetOpen(true);
  };

  const closeSheet = () => {
    setSheetOpen(false);
    setActiveHabit(null);
  };

  const handleSubmit = (values: HabitFormValues) => {
    const payload = formValuesToPayload(values);

    if (sheetMode === "create") {
      createHabitMutation.mutate(payload, { onSuccess: () => closeSheet() });
      return;
    }

    if (!activeHabit) return;

    updateHabitMutation.mutate(
      { id: activeHabit.id, payload },
      { onSuccess: () => closeSheet() },
    );
  };

  const handleDeleteRequest = (habit: Habit) => {
    setHabitToDelete(habit);
  };

  const handleConfirmDelete = () => {
    if (!habitToDelete) return;

    deleteHabitMutation.mutate(habitToDelete.id, {
      onSuccess: () => {
        setHabitToDelete(null);
        if (activeHabit?.id === habitToDelete.id) closeSheet();
      },
    });
  };

  const deleteDescription = useMemo(() => {
    if (!habitToDelete) return "";
    return habitsDict.deleteConfirmDescription.replace("{name}", habitToDelete.name);
  }, [habitToDelete]);

  return (
    <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col pb-8">
      <HabitsHeader />

      <section className="mt-2 px-4 sm:px-6">
        <p className="mb-4 text-sm text-muted-foreground">{habitsDict.subtitle}</p>

        <div className="space-y-3 pb-12">
          {isLoading ? (
            <div className="rounded-[1.75rem] bg-card px-5 py-8 text-center text-sm text-muted-foreground shadow-soft-sm">
              در حال بارگذاری...
            </div>
          ) : visibleHabits.length === 0 ? (
            <div className="rounded-[1.75rem] bg-card px-5 py-8 text-center text-sm text-muted-foreground shadow-soft-sm">
              {habitsDict.empty}
            </div>
          ) : (
            visibleHabits.map((habit) => (
              <HabitCard
                key={habit.id}
                habit={habit}
                onEdit={openEditSheet}
                onDelete={handleDeleteRequest}
              />
            ))
          )}
        </div>
      </section>

      <HabitsFab onClick={openCreateSheet} />

      <HabitSheet
        open={sheetOpen}
        mode={sheetMode}
        habit={activeHabit}
        isSubmitting={createHabitMutation.isPending || updateHabitMutation.isPending}
        isDeleting={deleteHabitMutation.isPending}
        onClose={closeSheet}
        onSubmit={handleSubmit}
        onDelete={
          sheetMode === "edit" && activeHabit
            ? () => handleDeleteRequest(activeHabit)
            : undefined
        }
      />

      <ConfirmModal
        open={Boolean(habitToDelete)}
        title={habitsDict.deleteConfirmTitle}
        description={deleteDescription}
        confirmLabel={habitsDict.delete}
        cancelLabel={habitsDict.cancel}
        isConfirming={deleteHabitMutation.isPending}
        onConfirm={handleConfirmDelete}
        onCancel={() => setHabitToDelete(null)}
      />
    </div>
  );
}