"use client";

import { useEffect, type ReactNode } from "react";
import { tasksDict } from "@/features/tasks/dict";

export type CreateItemChoice = "task" | "habit";

type TaskCreatePickerSheetProps = {
  open: boolean;
  onClose: () => void;
  onSelect: (choice: CreateItemChoice) => void;
};

function TaskOnceIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-5"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <rect x="4" y="4" width="16" height="16" rx="3" />
      <path d="M8 12l2.5 2.5L16 9" />
    </svg>
  );
}

function HabitRepeatIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-5"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <path d="M17 2l4 4-4 4" />
      <path d="M3 11V9a4 4 0 0 1 4-4h14" />
      <path d="M7 22l-4-4 4-4" />
      <path d="M21 13v2a4 4 0 0 1-4 4H3" />
    </svg>
  );
}

type PickerRowProps = {
  icon: ReactNode;
  iconClassName: string;
  title: string;
  description: string;
  onSelect: () => void;
};

function PickerRow({
  icon,
  iconClassName,
  title,
  description,
  onSelect,
}: PickerRowProps) {
  return (
    <button
      type="button"
      onClick={onSelect}
      className="flex w-full items-center gap-3 rounded-2xl px-3 py-3 text-start transition-colors hover:bg-muted/60"
    >
      <span
        className={`inline-flex size-11 shrink-0 items-center justify-center rounded-2xl ${iconClassName}`}
      >
        {icon}
      </span>

      <span className="min-w-0 flex-1">
        <span className="block text-sm font-semibold text-card-foreground sm:text-base">
          {title}
        </span>
        <span className="mt-0.5 block text-xs text-muted-foreground sm:text-sm">
          {description}
        </span>
      </span>

      <svg
        aria-hidden="true"
        className="size-4 shrink-0 text-muted-foreground"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        strokeWidth={2}
      >
        <path d="M15 6l-6 6 6 6" />
      </svg>
    </button>
  );
}

export function TaskCreatePickerSheet({
  open,
  onClose,
  onSelect,
}: TaskCreatePickerSheetProps) {
  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 handleSelect = (choice: CreateItemChoice) => {
    onClose();
    onSelect(choice);
  };

  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
        role="dialog"
        aria-modal="true"
        aria-labelledby="task-create-picker-title"
        className="relative z-10 w-full max-w-lg overflow-hidden rounded-t-3xl bg-card shadow-soft sm:rounded-3xl"
      >
        <div className="px-6 pt-4">
          <div className="mx-auto mb-4 h-1.5 w-12 rounded-full bg-border sm:hidden" />
          <div className="pb-2 text-center sm:text-start">
            <h2
              id="task-create-picker-title"
              className="text-lg font-bold text-card-foreground"
            >
              {tasksDict.createPickerTitle}
            </h2>
            <p className="mt-1 text-sm text-muted-foreground">
              {tasksDict.createPickerSubtitle}
            </p>
          </div>
        </div>

        <div className="space-y-1 px-3 pb-6 pt-2">
          <PickerRow
            icon={<TaskOnceIcon />}
            iconClassName="bg-[#56CCF2]/15 text-[#56CCF2]"
            title={tasksDict.individualTaskTitle}
            description={tasksDict.individualTaskDescription}
            onSelect={() => handleSelect("task")}
          />

          <PickerRow
            icon={<HabitRepeatIcon />}
            iconClassName="bg-[#2EC4B6]/15 text-[#2EC4B6]"
            title={tasksDict.recurringTaskTitle}
            description={tasksDict.recurringTaskDescription}
            onSelect={() => handleSelect("habit")}
          />
        </div>
      </div>
    </div>
  );
}