"use client";

import { useState } from "react";

import { Checkbox } from "@/components/ui/checkbox";
import {
  Item,
  ItemContent,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";
import { cn } from "@/lib/utils";

interface Todo {
  id: string;
  title: string;
  completed: boolean;
}

interface Todo1Props {
  heading?: string;
  description?: string;
  initialTodos?: Todo[];
  className?: string;
}

const defaultTodos: Todo[] = [
  {
    id: "1",
    title: "تکمیل مستندات فنی پروژه",
    completed: false,
  },
  {
    id: "2",
    title: "بررسی و تأیید طراحی رابط کاربری",
    completed: false,
  },
  {
    id: "3",
    title: "آماده‌سازی گزارش هفتگی",
    completed: false,
  },
  {
    id: "4",
    title: "بازبینی کد منابع",
    completed: true,
  },
  {
    id: "5",
    title: "هماهنگی با تیم طراحی",
    completed: false,
  },
];

const Todo1 = ({
  heading = "مدیریت وظایف",
  description = "روی هر وظیفه کلیک کنید تا وضعیت انجام آن تغییر کند.",
  initialTodos = defaultTodos,
  className,
}: Todo1Props) => {
  const [todos, setTodos] = useState(initialTodos);

  const toggleTodo = (id: string) => {
    setTodos((prevTodos) =>
      prevTodos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
      ),
    );
  };

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-2xl flex-col gap-8">
          <div className="flex flex-col gap-2">
            <h2 className="text-3xl font-semibold md:text-xl">{heading}</h2>
            <p className="text-muted-foreground">{description}</p>
          </div>
          <ItemGroup>
            {todos.map((todo) => (
              <Item
                key={todo.id}
                variant={todo.completed ? "muted" : "default"}
                className={cn(
                  "cursor-pointer items-center border-b transition-opacity",
                  todo.completed && "opacity-60",
                )}
                onClick={() => toggleTodo(todo.id)}
              >
                <ItemMedia>
                  <Checkbox
                    checked={todo.completed}
                    onCheckedChange={() => toggleTodo(todo.id)}
                    onClick={(e) => e.stopPropagation()}
                    aria-label={
                      todo.completed
                        ? `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌نشده`
                        : `علامت‌گذاری «${todo.title}» به‌عنوان انجام‌شده`
                    }
                  />
                </ItemMedia>
                <ItemContent>
                  <ItemTitle
                    className={
                      todo.completed ? "text-muted-foreground line-through" : ""
                    }
                  >
                    {todo.title}
                  </ItemTitle>
                </ItemContent>
              </Item>
            ))}
          </ItemGroup>
        </div>
      </div>
    </section>
  );
};

export { Todo1 };