"use client";

import { useEffect, useState, type FormEvent } from "react";
import { EisenhowerMatrixPicker } from "@/features/tasks/components/eisenhower-matrix-picker";
import { CategoryPicker } from "@/features/categories/components/category-picker";
import { TimePicker } from "@/components/time-picker/time-picker";
import { tasksDict } from "@/features/tasks/dict";
import type { Task, TaskFormValues } from "@/features/tasks/types";
import { categoryToSelection } from "@/features/categories/utils/category-helpers";
import {
  combineDateAndTime,
  extractTimeValue,
  formatSelectedDayLabel,
  type JalaliDay,
} from "@/features/tasks/utils/jalali";
import { validateTaskForm } from "@/features/tasks/utils/task-helpers";
import { DESCRIPTION_MAX_LENGTH, TITLE_MAX_LENGTH } from "@/lib/field-limits";

type TaskSheetProps = {
  open: boolean;
  mode: "create" | "edit";
  selectedDay: JalaliDay;
  task?: Task | null;
  isSubmitting: boolean;
  isDeleting?: boolean;
  onClose: () => void;
  onSubmit: (values: TaskFormValues) => void;
  onDelete?: () => void;
};

const defaultValues: TaskFormValues = {
  title: "",
  time: "08:00",
  description: "",
  isUrgent: false,
  isImportant: false,
  category: null,
};

export function TaskSheet({
  open,
  mode,
  selectedDay,
  task,
  isSubmitting,
  isDeleting = false,
  onClose,
  onSubmit,
  onDelete,
}: TaskSheetProps) {
  const [values, setValues] = useState<TaskFormValues>(defaultValues);
  const [errors, setErrors] = useState<Partial<Record<keyof TaskFormValues, string>>>(
    {},
  );

  useEffect(() => {
    if (!open) {
      return;
    }

    if (mode === "edit" && task) {
      setValues({
        title: task.title,
        time: extractTimeValue(task.dueDate ?? task.scheduledDate),
        description: task.description ?? "",
        isUrgent: task.isUrgent,
        isImportant: task.isImportant,
        category: categoryToSelection(task.category),
      });
    } else {
      setValues(defaultValues);
    }

    setErrors({});
  }, [open, mode, task]);

  useEffect(() => {
    if (!open) {
      return;
    }

    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        onClose();
      }
    };

    document.addEventListener("keydown", handleEscape);
    document.body.style.overflow = "hidden";

    return () => {
      document.removeEventListener("keydown", handleEscape);
      document.body.style.overflow = "";
    };
  }, [open, onClose]);

  if (!open) {
    return null;
  }

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const nextErrors = validateTaskForm(values);

    if (Object.keys(nextErrors).length > 0) {
      setErrors(nextErrors);
      return;
    }

    onSubmit(values);
  };

  const selectedDayLabel = formatSelectedDayLabel(selectedDay);

  return (
    <div className="fixed inset-0 z-[100] flex items-end justify-center bg-black/40 p-0 sm:items-center sm:p-4">
      <button
        type="button"
        aria-label={tasksDict.cancel}
        className="absolute inset-0"
        onClick={onClose}
      />

      <div className="relative z-10 flex max-h-[96vh] w-full max-w-lg flex-col overflow-hidden rounded-t-3xl bg-card shadow-soft sm:rounded-3xl">
        <div className="shrink-0 px-6 pt-4">
          <div className="mx-auto mb-4 h-1.5 w-12 rounded-full bg-border sm:hidden" />

          <div className="space-y-1 pb-4 text-center sm:text-start">
            <h2 className="text-xl font-bold text-card-foreground">
              {mode === "create" ? tasksDict.addTask : tasksDict.editTask}
            </h2>
            <p className="text-sm text-muted-foreground">{selectedDayLabel}</p>
          </div>
        </div>

        <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
          <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-6 pb-4">
            <div className="space-y-2">
              <label htmlFor="task-title" className="text-sm font-medium">
                {tasksDict.titleLabel}
              </label>
              <input
                id="task-title"
                value={values.title}
                maxLength={TITLE_MAX_LENGTH}
                onChange={(event) =>
                  setValues((current) => ({ ...current, title: event.target.value }))
                }
                placeholder={tasksDict.titlePlaceholder}
                className="h-12 w-full rounded-2xl bg-input px-4 text-sm shadow-soft-sm ring-1 ring-border outline-none focus:ring-2 focus:ring-primary"
              />
              {errors.title ? (
                <p className="text-sm text-destructive">{errors.title}</p>
              ) : null}
            </div>

            <div className="space-y-2">
              <CategoryPicker
                domain="TASK"
                value={values.category}
                onChange={(category) =>
                  setValues((current) => ({ ...current, category }))
                }
                id="task-category"
                label={tasksDict.typeLabel}
              />
            </div>

            <div className="space-y-2">
              <label htmlFor="task-time" className="text-sm font-medium">
                {tasksDict.timeLabel}
              </label>
              <TimePicker
                id="task-time"
                value={values.time}
                onChange={(time) =>
                  setValues((current) => ({ ...current, time }))
                }
              />
            </div>

            <div className="space-y-2">
              <label className="mb-2 block text-sm font-medium">{tasksDict.priorityLabel}</label>
              <EisenhowerMatrixPicker
                isImportant={values.isImportant}
                isUrgent={values.isUrgent}
                onChange={({ isImportant, isUrgent }) =>
                  setValues((current) => ({
                    ...current,
                    isImportant,
                    isUrgent,
                  }))
                }
              />
            </div>

            <div className="space-y-2">
              <label htmlFor="task-description" className="text-sm font-medium">
                {tasksDict.descriptionLabel}
              </label>
              <textarea
                id="task-description"
                value={values.description}
                maxLength={DESCRIPTION_MAX_LENGTH}
                onChange={(event) =>
                  setValues((current) => ({
                    ...current,
                    description: event.target.value,
                  }))
                }
                placeholder={tasksDict.descriptionPlaceholder}
                rows={3}
                className="w-full rounded-2xl bg-input px-4 py-3 text-sm shadow-soft-sm ring-1 ring-border outline-none focus:ring-2 focus:ring-primary"
              />
              {errors.description ? (
                <p className="text-sm text-destructive">{errors.description}</p>
              ) : null}
            </div>
          </div>

          <div className="shrink-0 border-t border-border bg-card px-6 py-4">
            <div className="flex flex-row gap-3">
              <button
                type="submit"
                disabled={isSubmitting || isDeleting}
                className="inline-flex h-12 flex-1 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-soft-sm transition-all hover:brightness-105 disabled:opacity-60"
              >
                {isSubmitting ? tasksDict.saving : tasksDict.save}
              </button>

              <button
                type="button"
                onClick={onClose}
                className="inline-flex h-12 flex-1 items-center justify-center rounded-2xl border border-border bg-background text-foreground transition-colors hover:bg-accent"
              >
                {tasksDict.cancel}
              </button>

              {mode === "edit" && onDelete ? (
                <button
                  type="button"
                  onClick={onDelete}
                  disabled={isDeleting || isSubmitting}
                  className="inline-flex h-12 flex-1 items-center justify-center rounded-2xl border border-destructive/30 text-destructive transition-colors hover:bg-destructive/10 disabled:opacity-60"
                >
                  {tasksDict.delete}
                </button>
              ) : null}
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}