"use client";

import { useEffect, useState, type FormEvent } from "react";
import { RangeSlider } from "@/components/range-slider";
import { moodDict } from "@/features/mood/dict";
import {
  MOOD_DESCRIPTION_MAX_LENGTH,
  type DailyMood,
  type DailyMoodFormValues,
} from "@/features/mood/types";
import {
  defaultMoodFormValues,
  formatMoodRatingLabel,
  moodFormToPayload,
  moodToFormValues,
  validateMoodForm,
} from "@/features/mood/utils/mood-helpers";

type DailyMoodSheetProps = {
  open: boolean;
  localDate: string;
  entry?: DailyMood | null;
  isLoadingEntry?: boolean;
  isSubmitting: boolean;
  onClose: () => void;
  onSubmit: (payload: ReturnType<typeof moodFormToPayload>) => void;
};

export function DailyMoodSheet({
  open,
  localDate,
  entry,
  isLoadingEntry = false,
  isSubmitting,
  onClose,
  onSubmit,
}: DailyMoodSheetProps) {
  const [values, setValues] = useState<DailyMoodFormValues>(defaultMoodFormValues());
  const [errors, setErrors] = useState<
    Partial<Record<keyof DailyMoodFormValues, string>>
  >({});

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

    setValues(entry ? moodToFormValues(entry) : defaultMoodFormValues());
    setErrors({});
  }, [open, entry, isLoadingEntry]);

  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 = validateMoodForm(values);
    if (Object.keys(nextErrors).length > 0) {
      setErrors(nextErrors);
      return;
    }

    onSubmit(moodFormToPayload(localDate, values));
  };

  const isEdit = Boolean(entry);

  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={moodDict.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">
              {isEdit ? moodDict.sheetEditTitle : moodDict.sheetTitle}
            </h2>
            {isEdit && entry ? (
              <p className="text-sm text-muted-foreground">
                {formatMoodRatingLabel(entry.dayRating)}
              </p>
            ) : null}
          </div>
        </div>

        <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
          {isLoadingEntry ? (
            <div className="px-6 py-10 text-center text-sm text-muted-foreground">
              {moodDict.loadingEntry}
            </div>
          ) : (
            <>
          <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-6 pb-4">
            <RangeSlider
              label={moodDict.dayRatingLabel}
              value={values.dayRating}
              onChange={(dayRating) =>
                setValues((current) => ({ ...current, dayRating: dayRating ?? 0 }))
              }
              disabled={isSubmitting}
            />
            {errors.dayRating ? (
              <p className="-mt-3 text-sm text-destructive">{errors.dayRating}</p>
            ) : null}

            <RangeSlider
              label={moodDict.energyLevelLabel}
              value={values.energyLevel}
              onChange={(energyLevel) =>
                setValues((current) => ({ ...current, energyLevel }))
              }
              optional
              disabled={isSubmitting}
            />

            <RangeSlider
              label={moodDict.moodLabel}
              value={values.mood}
              onChange={(mood) => setValues((current) => ({ ...current, mood }))}
              optional
              disabled={isSubmitting}
            />

            <div className="space-y-2">
              <label
                htmlFor="daily-mood-description"
                className="text-sm font-medium text-foreground"
              >
                {moodDict.descriptionLabel}
                <span className="ms-1 text-xs font-normal text-muted-foreground">
                  (اختیاری)
                </span>
              </label>
              <textarea
                id="daily-mood-description"
                value={values.description}
                maxLength={MOOD_DESCRIPTION_MAX_LENGTH}
                onChange={(event) =>
                  setValues((current) => ({
                    ...current,
                    description: event.target.value,
                  }))
                }
                placeholder={moodDict.descriptionPlaceholder}
                rows={3}
                disabled={isSubmitting}
                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 disabled:opacity-60"
              />
              {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 || isLoadingEntry}
                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
                  ? moodDict.saving
                  : isEdit
                    ? moodDict.update
                    : moodDict.save}
              </button>

              <button
                type="button"
                onClick={onClose}
                disabled={isSubmitting}
                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 disabled:opacity-60"
              >
                {moodDict.cancel}
              </button>
            </div>
          </div>
            </>
          )}
        </form>
      </div>
    </div>
  );
}