"use client";

import { useState } from "react";
import { BellRing, CalendarClock, Clock3, Repeat } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import type { ReminderUpsertInput } from "@/hooks/use-reminders";
import {
  fromDatetimeLocalValue,
  getDefaultReminderTime,
  REMINDER_RECURRENCE_LABELS,
  REMINDER_WEEKDAY_OPTIONS,
  toDatetimeLocalValue,
} from "@/lib/reminders";
import { cn } from "@/lib/utils";
import type { Reminder, ReminderRecurrenceRule, ReminderSourceType } from "@/types";

interface ReminderSourceDraft {
  source_id?: string | null;
  source_title?: string | null;
  source_type: ReminderSourceType;
  source_url?: string | null;
}

interface ReminderFormProps {
  defaultBody?: string;
  defaultSource?: ReminderSourceDraft;
  defaultTitle?: string;
  onCancel: () => void;
  onSubmit: (input: ReminderUpsertInput) => Promise<void>;
  reminder?: Reminder | null;
  submitting: boolean;
}

function toLocalParts(value: Date | string) {
  const localValue = toDatetimeLocalValue(value);
  const [dateValue, timeValue] = localValue.split("T");

  return {
    dateValue: dateValue || "",
    timeValue: timeValue || "09:00",
  };
}

function presetDate(kind: "later" | "tomorrow" | "week") {
  const date = new Date();

  if (kind === "later") {
    date.setHours(date.getHours() + 3, 0, 0, 0);
  } else if (kind === "tomorrow") {
    date.setDate(date.getDate() + 1);
    date.setHours(9, 0, 0, 0);
  } else {
    date.setDate(date.getDate() + 7);
    date.setHours(9, 0, 0, 0);
  }

  return toLocalParts(date);
}

const DEFAULT_WEEKDAYS = [1, 2, 3, 4, 5];

function toggleWeekday(current: number[], day: number) {
  return current.includes(day)
    ? current.filter((item) => item !== day)
    : [...current, day].sort((left, right) => {
        const leftOrder = left === 0 ? 7 : left;
        const rightOrder = right === 0 ? 7 : right;
        return leftOrder - rightOrder;
      });
}

export function ReminderForm({
  defaultBody,
  defaultSource,
  defaultTitle,
  onCancel,
  onSubmit,
  reminder,
  submitting,
}: ReminderFormProps) {
  const [title, setTitle] = useState(reminder?.title || defaultTitle || "");
  const [body, setBody] = useState(reminder?.body || defaultBody || "");
  const initialReminderTime = toLocalParts(
    reminder?.snoozed_until || reminder?.remind_at || getDefaultReminderTime(),
  );
  const [dateValue, setDateValue] = useState(initialReminderTime.dateValue);
  const [timeValue, setTimeValue] = useState(initialReminderTime.timeValue);
  const [recurrenceRule, setRecurrenceRule] = useState<ReminderRecurrenceRule>(
    reminder?.recurrence_rule || "none",
  );
  const [recurrenceDays, setRecurrenceDays] = useState<number[]>(
    reminder?.recurrence_days?.length ? reminder.recurrence_days : DEFAULT_WEEKDAYS,
  );

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const remindAt = fromDatetimeLocalValue(`${dateValue}T${timeValue || "09:00"}`);

    await onSubmit({
      body,
      recurrence_days: recurrenceRule === "weekdays" ? recurrenceDays : [],
      recurrence_rule: recurrenceRule,
      remind_at: remindAt,
      source_id: reminder?.source_id || defaultSource?.source_id || null,
      source_title: reminder?.source_title || defaultSource?.source_title || null,
      source_type: reminder?.source_type || defaultSource?.source_type || "manual",
      source_url: reminder?.source_url || defaultSource?.source_url || null,
      status: "scheduled",
      title,
    });
  }

  const sourceTitle = reminder?.source_title || defaultSource?.source_title;

  return (
    <form onSubmit={handleSubmit} className="space-y-5 text-white">
      <div className="rounded-3xl border border-white/[0.08] bg-[radial-gradient(circle_at_top_left,#26324f_0%,#11131d_42%,#0c0c10_100%)] p-5">
        <div className="flex items-start gap-4">
          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-sky-400/12">
            <BellRing className="h-5 w-5 text-sky-200" />
          </div>
          <div>
            <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-sky-200/60">
              Remind me
            </p>
            <h3 className="mt-1 text-xl font-bold tracking-tight">
              Bring this back to your attention
            </h3>
            <p className="mt-2 text-sm leading-relaxed text-white/45">
              A reminder is not another task. It is a future attention ping with the original context attached.
            </p>
          </div>
        </div>
      </div>

      <div>
        <FormLabel>Title</FormLabel>
        <Input
          autoFocus
          value={title}
          onChange={(event) => setTitle(event.target.value)}
          placeholder="e.g. Check investor deck again"
          className="mt-1 border-white/[0.08] bg-white/[0.03] text-white placeholder:text-white/20"
        />
      </div>

      <div>
        <FormLabel>Notes</FormLabel>
        <Textarea
          value={body}
          onChange={(event) => setBody(event.target.value)}
          placeholder="Optional context, link, thought, or next step."
          className="mt-1 min-h-[92px] border-white/[0.08] bg-white/[0.03] text-white placeholder:text-white/20"
        />
      </div>

      <div className="grid gap-4 md:grid-cols-[1fr_150px_190px]">
        <div>
          <FormLabel>Date</FormLabel>
          <div className="relative mt-1">
            <Input
              type="date"
              value={dateValue}
              onChange={(event) => setDateValue(event.target.value)}
              className="border-white/[0.08] bg-white/[0.03] pl-10 text-white"
            />
            <CalendarClock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/25" />
          </div>
        </div>
        <div>
          <FormLabel>Time</FormLabel>
          <div className="relative mt-1">
            <Input
              type="time"
              value={timeValue}
              onChange={(event) => setTimeValue(event.target.value)}
              className="border-white/[0.08] bg-white/[0.03] pl-10 text-white"
            />
            <Clock3 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/25" />
          </div>
        </div>
        <div>
          <FormLabel>Repeat</FormLabel>
          <div className="relative mt-1">
            <Select
              value={recurrenceRule}
              onChange={(event) => {
                const nextRule = event.target.value as ReminderRecurrenceRule;
                setRecurrenceRule(nextRule);
                if (nextRule === "weekdays" && recurrenceDays.length === 0) {
                  setRecurrenceDays(DEFAULT_WEEKDAYS);
                }
              }}
              className="border-white/[0.08] bg-white/[0.03] pl-9 text-white"
            >
              {Object.entries(REMINDER_RECURRENCE_LABELS).map(([value, label]) => (
                <option key={value} value={value}>
                  {label}
                </option>
              ))}
            </Select>
            <Repeat className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/25" />
          </div>
        </div>
      </div>

      {recurrenceRule === "weekdays" && (
        <div className="rounded-2xl border border-white/[0.07] bg-white/[0.025] p-4">
          <div className="mb-3 flex items-start justify-between gap-3">
            <div>
              <FormLabel>Repeat on</FormLabel>
              <p className="mt-1 text-[12px] text-white/30">
                Pick the weekdays this reminder should come back at {timeValue || "09:00"}.
              </p>
            </div>
            <span className="rounded-full bg-sky-500/10 px-2.5 py-1 text-[10px] font-bold text-sky-300">
              {recurrenceDays.length || 0} selected
            </span>
          </div>
          <div className="grid grid-cols-7 gap-2">
            {REMINDER_WEEKDAY_OPTIONS.map((day) => {
              const selected = recurrenceDays.includes(day.value);
              return (
                <button
                  key={day.value}
                  type="button"
                  onClick={() => setRecurrenceDays((current) => toggleWeekday(current, day.value))}
                  title={day.longLabel}
                  className={cn(
                    "rounded-2xl border px-2 py-3 text-sm font-bold transition-all",
                    selected
                      ? "border-sky-400/30 bg-sky-500/15 text-sky-100 shadow-[0_0_18px_rgba(14,165,233,0.14)]"
                      : "border-white/[0.07] bg-white/[0.025] text-white/30 hover:bg-white/[0.05] hover:text-white/55",
                  )}
                >
                  {day.label}
                </button>
              );
            })}
          </div>
          {recurrenceDays.length === 0 && (
            <p className="mt-3 text-[12px] text-amber-200/70">
              Select at least one weekday for this repeat mode.
            </p>
          )}
        </div>
      )}

      <div className="flex flex-wrap gap-2">
        {[
          { label: "Later today", value: "later" as const },
          { label: "Tomorrow 9:00", value: "tomorrow" as const },
          { label: "Next week", value: "week" as const },
        ].map((preset) => (
          <button
            key={preset.value}
            type="button"
            onClick={() => {
              const next = presetDate(preset.value);
              setDateValue(next.dateValue);
              setTimeValue(next.timeValue);
            }}
            className="rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-semibold text-white/45 transition-all hover:bg-white/[0.06] hover:text-white/70"
          >
            {preset.label}
          </button>
        ))}
      </div>

      {sourceTitle && (
        <div className="rounded-2xl border border-white/[0.07] bg-white/[0.025] p-4">
          <p className="text-[10px] font-bold uppercase tracking-[0.16em] text-white/25">
            Linked context
          </p>
          <p className="mt-1 text-sm text-white/65">{sourceTitle}</p>
        </div>
      )}

      <div className="flex justify-end gap-3 pt-1">
        <button
          type="button"
          onClick={onCancel}
          className="rounded-xl border border-white/[0.07] bg-white/[0.03] px-5 py-2.5 text-[13px] font-semibold text-white/50 transition-all hover:bg-white/[0.06] hover:text-white/70"
        >
          Cancel
        </button>
        <button
          type="submit"
          disabled={
            !title.trim() ||
            !dateValue ||
            !timeValue ||
            (recurrenceRule === "weekdays" && recurrenceDays.length === 0) ||
            submitting
          }
          className={cn(
            "rounded-xl px-5 py-2.5 text-[13px] font-bold text-white transition-all",
            "bg-sky-600 shadow-[0_4px_20px_rgba(14,165,233,0.26)] hover:bg-sky-500",
            "disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none",
          )}
        >
          {submitting ? "Saving..." : reminder ? "Save reminder" : "Create reminder"}
        </button>
      </div>
    </form>
  );
}

function FormLabel({ children }: { children: React.ReactNode }) {
  return (
    <label className="text-[11px] font-bold uppercase tracking-[0.16em] text-white/35">
      {children}
    </label>
  );
}