"use client";

import { AddNoteDialog } from "@/components/dashboard/projects/add-note-dialog";
import { AddTaskDialog } from "@/components/dashboard/projects/add-task-dialog";
import { TaskCard } from "@/components/dashboard/projects/task-card";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { useRouter } from "@/i18n/routing";
import { Plus } from "lucide-react";
import { useParams } from "next/navigation";
import { useState } from "react";

interface Task {
  id: string;
  title: string;
  titleEn: string;
  dueDate: string;
  dueDateEn: string;
  status: "completed" | "inProgress" | "notStarted";
}

interface TimelineViewProps {
  tasks: Task[];
  notes: string;
  isArabic: boolean;
  minDate?: string;
  maxDate?: string;
  translations: {
    addTask: string;
    addNote: string;
    tasks: string;
    notes: string;
    addTaskDialog: {
      title: string;
      taskNameLabel: string;
      taskNamePlaceholder: string;
      dueDateLabel: string;
      dueDatePlaceholder: string;
      saveButton: string;
      cancelButton: string;
    };
    addNoteDialog: {
      title: string;
      noteTitleLabel: string;
      noteTitlePlaceholder: string;
      noteContentLabel: string;
      noteContentPlaceholder: string;
      saveButton: string;
      cancelButton: string;
    };
  };
  statusTranslations: {
    completed: string;
    inProgress: string;
    notStarted: string;
  };
}

export function TimelineView({
  tasks: initialTasks,
  notes: initialNotes,
  isArabic,
  minDate,
  maxDate,
  translations,
  statusTranslations,
}: TimelineViewProps) {
  const params = useParams<{ id: string; "timeline-id": string }>();
  const router = useRouter();

  const [tasks, setTasks] = useState(initialTasks);
  const [notes, setNotes] = useState(initialNotes);
  const [isTaskDialogOpen, setIsTaskDialogOpen] = useState(false);
  const [isNoteDialogOpen, setIsNoteDialogOpen] = useState(false);

  const mapTaskStatusToCardStatus = (
    status: Task["status"],
  ): "completed" | "inProgress" | "not_started" => {
    switch (status) {
      case "completed":
        return "completed";
      case "inProgress":
        return "inProgress";
      case "notStarted":
      default:
        return "not_started";
    }
  };

  const handleAddTask = (data: { title: string; dueDate: string }) => {
    const newTask: Task = {
      id: String(tasks.length + 1),
      title: data.title,
      titleEn: data.title,
      dueDate: `تاريخ الاستحقاق : ${data.dueDate}`,
      dueDateEn: `Due date: ${data.dueDate}`,
      status: "notStarted",
    };
    setTasks([...tasks, newTask]);
  };

  const handleAddNote = (data: { title: string; content: string }) => {
    const newNote = `${data.title}\n${data.content}`;
    setNotes(newNote);
  };

  const handleToggleTask = (taskId: string) => {
    setTasks(
      tasks.map((task) => {
        if (task.id === taskId) {
          return {
            ...task,
            status:
              task.status === "completed"
                ? "notStarted"
                : task.status === "inProgress"
                ? "completed"
                : ("inProgress" as const),
          };
        }
        return task;
      })
    );
  };

  return (
    <>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
        <Card>
          <div className="border-b border-border p-4 flex items-center justify-between">
            <h3 className="text-base font-semibold text-foreground">
              {translations.tasks}
            </h3>
            <Button
              variant="outline"
              size="sm"
              className="h-9 gap-2"
              onClick={() => setIsTaskDialogOpen(true)}
            >
              <Plus className="h-4 w-4" />
              {translations.addTask}
            </Button>
          </div>

          <div className="p-4 space-y-3">
            {tasks.map((task) => (
              <TaskCard
                key={task.id}
                title={isArabic ? task.title : task.titleEn}
                dueDate={isArabic ? task.dueDate : task.dueDateEn}
                status={mapTaskStatusToCardStatus(task.status)}
                statusLabel={
                  task.status === "completed"
                    ? statusTranslations.completed
                    : task.status === "inProgress"
                      ? statusTranslations.inProgress
                      : statusTranslations.notStarted
                }
                onToggle={() => handleToggleTask(task.id)}
                onView={() =>
                  router.push(
                    `/projects/${params.id}/time-line/${params["timeline-id"]}/tasks/${task.id}`
                  )
                }
                onEdit={() =>
                  router.push(
                    `/projects/${params.id}/time-line/${params["timeline-id"]}/tasks/${task.id}/edit`
                  )
                }
              />
            ))}
          </div>
        </Card>

        <Card>
          <div className="border-b border-border p-4 flex items-center justify-between">
            <h3 className="text-base font-semibold text-foreground">
              {translations.notes}
            </h3>
            <Button
              variant="outline"
              size="sm"
              className="h-9 gap-2"
              onClick={() => setIsNoteDialogOpen(true)}
            >
              <Plus className="h-4 w-4" />
              {translations.addNote}
            </Button>
          </div>

          <div className="p-4">
            <div className="space-y-2">
              <p className="text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap">
                {notes}
              </p>
              <p className="text-sm text-foreground">
                {isArabic ? "منذ أسبوع" : "A week ago"}
              </p>
            </div>
          </div>
        </Card>
      </div>

      <AddTaskDialog
        open={isTaskDialogOpen}
        onOpenChange={setIsTaskDialogOpen}
        onSubmit={handleAddTask}
        minDate={minDate}
        maxDate={maxDate}
        locale={isArabic ? "ar" : "en"}
        labels={translations.addTaskDialog}
      />

      <AddNoteDialog
        open={isNoteDialogOpen}
        onOpenChange={setIsNoteDialogOpen}
        onSubmit={handleAddNote}
        labels={translations.addNoteDialog}
      />
    </>
  );
}