"use client";

import { useEffect, useMemo, useState } from "react";
import { useSearchParams } from "next/navigation";
import {
  AlarmClock,
  BellRing,
  CalendarDays,
  CheckCircle2,
  Clock3,
  Plus,
  RotateCcw,
} from "lucide-react";
import { ReminderCard } from "@/components/reminders/reminder-card";
import { ReminderForm } from "@/components/reminders/reminder-form";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import { Modal } from "@/components/ui/modal";
import { Skeleton } from "@/components/ui/skeleton";
import { useReminders } from "@/hooks/use-reminders";
import { requestBrowserNotificationPermissionOnce } from "@/lib/browser-notifications";
import { getReminderDueAt, isReminderDue, isReminderClosed } from "@/lib/reminders";
import { cn, isSameLocalDay } from "@/lib/utils";
import type { Reminder } from "@/types";

const FILTERS = [
  { label: "All", value: "all" },
  { label: "Due now", value: "due" },
  { label: "Today", value: "today" },
  { label: "Snoozed", value: "snoozed" },
  { label: "Later", value: "upcoming" },
  { label: "Done", value: "done" },
] as const;

export default function RemindersPage() {
  const searchParams = useSearchParams();
  const {
    completeReminder,
    createReminder,
    deleteReminder,
    loading,
    reminders,
    snoozeReminder,
    updateReminder,
  } = useReminders();
  const [activeFilter, setActiveFilter] = useState<(typeof FILTERS)[number]["value"]>("all");
  const [modalOpen, setModalOpen] = useState(false);
  const [editingReminder, setEditingReminder] = useState<Reminder | null>(null);
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    if (searchParams.get("create") === "1") {
      setEditingReminder(null);
      setModalOpen(true);
    }
  }, [searchParams]);

  const now = Date.now();
  const sections = useMemo(() => {
    const byDueAtAsc = (left: Reminder, right: Reminder) =>
      new Date(getReminderDueAt(left)).getTime() - new Date(getReminderDueAt(right)).getTime();

    const openReminders = reminders.filter((reminder) => !isReminderClosed(reminder));
    const done = reminders.filter((reminder) => reminder.status === "done").sort(byDueAtAsc);
    const cancelled = reminders.filter((reminder) => reminder.status === "cancelled").sort(byDueAtAsc);
    const due = openReminders.filter((reminder) => isReminderDue(reminder)).sort(byDueAtAsc);
    const dueIds = new Set(due.map((reminder) => reminder.id));
    const snoozed = openReminders.filter(
      (reminder) => reminder.status === "snoozed" && !dueIds.has(reminder.id),
    ).sort(byDueAtAsc);
    const today = openReminders.filter((reminder) => {
      if (dueIds.has(reminder.id) || reminder.status === "snoozed") return false;
      return isSameLocalDay(getReminderDueAt(reminder), new Date());
    }).sort(byDueAtAsc);
    const upcoming = openReminders.filter((reminder) => {
      if (dueIds.has(reminder.id) || reminder.status === "snoozed") return false;
      if (isSameLocalDay(getReminderDueAt(reminder), new Date())) return false;
      return new Date(getReminderDueAt(reminder)).getTime() > now;
    }).sort(byDueAtAsc);

    return { cancelled, done, due, snoozed, today, upcoming };
  }, [now, reminders]);

  const orderedReminders = useMemo(
    () => [
      ...sections.due,
      ...sections.today,
      ...sections.snoozed,
      ...sections.upcoming,
      ...sections.done,
      ...sections.cancelled,
    ],
    [sections],
  );

  const filteredReminders = useMemo(() => {
    if (activeFilter === "all") return orderedReminders;
    return sections[activeFilter];
  }, [activeFilter, orderedReminders, sections]);

  const nextReminder = useMemo(() => {
    const openReminders = reminders
      .filter((reminder) => !isReminderClosed(reminder) && !isReminderDue(reminder))
      .sort((a, b) => new Date(getReminderDueAt(a)).getTime() - new Date(getReminderDueAt(b)).getTime());

    return openReminders[0] || null;
  }, [reminders]);

  const timelineReminders = useMemo(
    () => [
      ...sections.due,
      ...sections.today,
      ...sections.snoozed,
      ...sections.upcoming.slice(0, Math.max(0, 8 - sections.due.length - sections.today.length - sections.snoozed.length)),
      ...sections.done.slice(0, 2),
    ].slice(0, 10),
    [sections],
  );

  async function handleSubmit(input: Parameters<typeof createReminder>[0]) {
    setSubmitting(true);
    try {
      if (editingReminder) {
        await updateReminder(editingReminder.id, input);
      } else {
        void requestBrowserNotificationPermissionOnce();
        await createReminder(input);
      }
      setModalOpen(false);
      setEditingReminder(null);
    } finally {
      setSubmitting(false);
    }
  }

  function handleCreate() {
    setEditingReminder(null);
    setModalOpen(true);
  }

  function handleEdit(reminder: Reminder) {
    setEditingReminder(reminder);
    setModalOpen(true);
  }

  async function handleDelete(reminderId: string) {
    const reminder = reminders.find((item) => item.id === reminderId);
    if (!reminder) return;
    if (!window.confirm(`Delete "${reminder.title}"?`)) return;
    await deleteReminder(reminderId);
  }

  return (
    <div className="min-h-full bg-[#0a0a0d] text-white">
      <div className="relative overflow-hidden border-b border-white/[0.04]">
        <div className="pointer-events-none absolute inset-0">
          <div
            className="absolute -left-[10%] -top-[40%] h-[500px] w-[500px] rounded-full opacity-20 blur-3xl"
            style={{ background: "radial-gradient(circle, #0ea5e9, transparent 70%)" }}
          />
          <div
            className="absolute right-[10%] top-[20%] h-[300px] w-[300px] rounded-full opacity-10 blur-3xl"
            style={{ background: "radial-gradient(circle, #7c3aed, transparent 70%)" }}
          />
        </div>

        <div className="relative mx-auto max-w-[1280px] px-6 py-10">
          <div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
            <div className="max-w-2xl">
              <div className="mb-5 flex items-center gap-3">
                <div className="flex h-11 w-11 items-center justify-center rounded-[16px] bg-sky-500/15 ring-1 ring-sky-500/20">
                  <BellRing className="h-5 w-5 text-sky-300" />
                </div>
                <div>
                  <p className="text-[10px] font-bold uppercase tracking-[0.22em] text-sky-300/60">
                    Reminders & Attention
                  </p>
                </div>
              </div>

              <h1 className="text-[34px] font-bold leading-tight tracking-tight text-white">
                Bring it back<br />
                <span className="text-white/40">when it matters.</span>
              </h1>
              <p className="mt-4 max-w-lg text-[14px] leading-relaxed text-white/45">
                Capture lightweight reminders without turning every thought into a task.
                Mindavio keeps the context and brings it back at the right time.
              </p>

              <div className="mt-5 flex flex-wrap gap-2">
                <FeaturePill>Custom repeat days</FeaturePill>
                <FeaturePill>Context-aware pings</FeaturePill>
                <FeaturePill>Notification center</FeaturePill>
              </div>
            </div>

            <button
              onClick={handleCreate}
              className="flex items-center gap-2 self-start rounded-2xl bg-sky-600 px-5 py-3 text-[14px] font-bold text-white shadow-[0_8px_30px_rgba(14,165,233,0.30)] transition-all hover:bg-sky-500 hover:shadow-[0_8px_40px_rgba(14,165,233,0.40)] active:scale-[0.98]"
            >
              <Plus className="h-4 w-4" />
              New reminder
            </button>
          </div>

          <div className="mt-8 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
            <MetricCard
              accent="amber"
              icon={<AlarmClock className="h-4 w-4 text-amber-300" />}
              iconBg="bg-amber-500/12"
              label="Due now"
              sub="Needs attention"
              value={String(sections.due.length)}
            />
            <MetricCard
              accent="sky"
              icon={<Clock3 className="h-4 w-4 text-sky-300" />}
              iconBg="bg-sky-500/12"
              label="Today"
              sub="Later today"
              value={String(sections.today.length)}
            />
            <MetricCard
              accent="violet"
              icon={<RotateCcw className="h-4 w-4 text-violet-300" />}
              iconBg="bg-violet-500/12"
              label="Snoozed"
              sub="Paused for later"
              value={String(sections.snoozed.length)}
            />
            <MetricCard
              accent="emerald"
              icon={<CheckCircle2 className="h-4 w-4 text-emerald-300" />}
              iconBg="bg-emerald-500/12"
              label="Next"
              sub={nextReminder?.title || "Create a reminder"}
              truncate
              value={
                nextReminder
                  ? new Date(getReminderDueAt(nextReminder)).toLocaleTimeString("de-DE", {
                      hour: "2-digit",
                      minute: "2-digit",
                    })
                  : "—"
              }
            />
          </div>
        </div>
      </div>

      <div className="mx-auto max-w-[1280px] px-6 py-8">
        <div className="mb-6 flex flex-wrap gap-2">
          {FILTERS.map((filter) => (
            <button
              key={filter.value}
              type="button"
              onClick={() => setActiveFilter(filter.value)}
              className={cn(
                "rounded-full border px-4 py-2 text-[13px] font-semibold transition-all",
                activeFilter === filter.value
                  ? "border-sky-500/30 bg-sky-500/[0.12] text-sky-200"
                  : "border-white/[0.07] bg-white/[0.02] text-white/40 hover:border-white/[0.12] hover:bg-white/[0.05] hover:text-white/60",
              )}
            >
              {filter.label}
            </button>
          ))}
          <span className="ml-auto self-center text-[12px] text-white/20">
            {filteredReminders.length} reminder{filteredReminders.length !== 1 ? "s" : ""}
          </span>
        </div>

        {!loading && timelineReminders.length > 0 && (
          <SmartReminderTimeline reminders={timelineReminders} onOpen={handleEdit} />
        )}

        {sections.due.length > 0 && activeFilter !== "done" && (
          <div className="mb-6 overflow-hidden rounded-2xl border border-amber-500/15 bg-amber-500/[0.04]">
            <div className="flex flex-col gap-4 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
              <div className="flex items-start gap-3">
                <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-amber-500/15">
                  <AlarmClock className="h-3.5 w-3.5 text-amber-300" />
                </div>
                <div>
                  <p className="text-[13px] font-semibold text-white/80">
                    {sections.due.length} reminder{sections.due.length !== 1 ? "s are" : " is"} due now
                  </p>
                  <p className="mt-0.5 text-[12px] text-white/35">
                    Clear them, snooze them, or open the reminder to keep your attention layer clean.
                  </p>
                </div>
              </div>
              <button
                type="button"
                onClick={() => setActiveFilter("due")}
                className="shrink-0 self-start rounded-xl border border-amber-500/20 bg-amber-500/[0.08] px-4 py-2 text-[12px] font-semibold text-amber-200 transition-all hover:bg-amber-500/15 sm:self-center"
              >
                Show due
              </button>
            </div>
          </div>
        )}

        {loading ? (
          <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
            {Array.from({ length: 6 }).map((_, index) => (
              <Skeleton key={index} className="h-[360px] rounded-[28px] bg-white/[0.03]" />
            ))}
          </div>
        ) : filteredReminders.length === 0 ? (
          <EmptyState
            icon={<BellRing className="h-10 w-10" />}
            title="No reminders yet"
            description="Create your first reminder and let Mindavio bring it back when it matters."
            action={
              <Button onClick={handleCreate}>
                <Plus className="h-4 w-4" />
                Create reminder
              </Button>
            }
            className="rounded-[28px] border border-dashed border-white/[0.07] bg-white/[0.015]"
          />
        ) : (
          <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
            {filteredReminders.map((reminder) => (
              <ReminderCard
                key={reminder.id}
                reminder={reminder}
                onDelete={handleDelete}
                onDone={completeReminder}
                onEdit={handleEdit}
                onSnooze={snoozeReminder}
              />
            ))}
          </div>
        )}
      </div>

      <Modal
        open={modalOpen}
        onClose={() => {
          setModalOpen(false);
          setEditingReminder(null);
        }}
        title={editingReminder ? "Edit reminder" : "Create reminder"}
        className="max-w-3xl border-white/[0.08] bg-[#0e0f16]"
      >
        <ReminderForm
          key={editingReminder?.id || "new-reminder"}
          onCancel={() => {
            setModalOpen(false);
            setEditingReminder(null);
          }}
          onSubmit={handleSubmit}
          reminder={editingReminder}
          submitting={submitting}
        />
      </Modal>
    </div>
  );
}

function MetricCard({
  accent,
  icon,
  iconBg,
  label,
  sub,
  truncate,
  value,
}: {
  accent: "amber" | "emerald" | "sky" | "violet";
  icon: React.ReactNode;
  iconBg: string;
  label: string;
  sub: string;
  truncate?: boolean;
  value: string;
}) {
  const borderMap = {
    amber: "border-amber-500/[0.08] hover:border-amber-500/[0.15]",
    emerald: "border-emerald-500/[0.08] hover:border-emerald-500/[0.15]",
    sky: "border-sky-500/[0.08] hover:border-sky-500/[0.15]",
    violet: "border-violet-500/[0.08] hover:border-violet-500/[0.15]",
  };

  return (
    <div className={cn("rounded-2xl border bg-white/[0.025] px-5 py-4 transition-all", borderMap[accent])}>
      <div className="mb-3 flex items-center justify-between gap-2">
        <div className={cn("flex h-8 w-8 items-center justify-center rounded-xl", iconBg)}>
          {icon}
        </div>
        <p className="text-[10px] font-bold uppercase tracking-[0.16em] text-white/20">
          {label}
        </p>
      </div>
      <p className={cn("text-[24px] font-bold tracking-tight text-white", truncate && "truncate text-[18px]")}>
        {value}
      </p>
      <p className="mt-1 truncate text-[11px] text-white/30">{sub}</p>
    </div>
  );
}

function FeaturePill({ children }: { children: React.ReactNode }) {
  return (
    <span className="rounded-full border border-white/[0.07] bg-white/[0.03] px-3 py-1 text-[11px] text-white/40">
      {children}
    </span>
  );
}

function SmartReminderTimeline({
  reminders,
  onOpen,
}: {
  reminders: Reminder[];
  onOpen: (reminder: Reminder) => void;
}) {
  return (
    <section className="mb-6 overflow-hidden rounded-[28px] border border-sky-500/10 bg-[radial-gradient(circle_at_top_left,rgba(14,165,233,0.10),rgba(255,255,255,0.02)_42%,rgba(255,255,255,0.015)_100%)]">
      <div className="flex flex-col gap-2 border-b border-white/[0.05] px-5 py-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-sky-300/60">
            Smart Timeline
          </p>
          <h2 className="mt-1 text-[18px] font-bold tracking-tight text-white">
            Was als nächstes deine Aufmerksamkeit braucht
          </h2>
        </div>
        <p className="text-[12px] text-white/30">
          Anstehend bleibt vor erledigt
        </p>
      </div>

      <div className="grid gap-3 p-5 lg:grid-cols-2">
        {reminders.map((reminder) => {
          const dueAt = getReminderDueAt(reminder);
          const status = getTimelineStatus(reminder);

          return (
            <button
              key={reminder.id}
              type="button"
              onClick={() => onOpen(reminder)}
              className="group flex items-center gap-4 rounded-2xl border border-white/[0.06] bg-white/[0.025] p-4 text-left transition-all hover:border-sky-500/20 hover:bg-white/[0.05]"
            >
              <div className={cn("flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl", status.iconBg)}>
                {status.icon}
              </div>
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2">
                  <p className={cn("truncate text-[14px] font-semibold text-white/78", status.closed && "text-white/35 line-through")}>
                    {reminder.title}
                  </p>
                  <span className={cn("shrink-0 rounded-full px-2 py-0.5 text-[9px] font-bold uppercase tracking-[0.12em]", status.badge)}>
                    {status.label}
                  </span>
                </div>
                <p className="mt-1 truncate text-[12px] text-white/32">
                  {formatTimelineDate(dueAt)}
                  {reminder.source_title ? ` · ${reminder.source_title}` : ""}
                </p>
              </div>
              <CalendarDays className="h-4 w-4 shrink-0 text-white/18 transition-colors group-hover:text-sky-300/50" />
            </button>
          );
        })}
      </div>
    </section>
  );
}

function formatTimelineDate(iso: string) {
  const date = new Date(iso);
  const today = isSameLocalDay(iso, new Date());
  const datePart = today
    ? "Heute"
    : date.toLocaleDateString("de-DE", { day: "2-digit", month: "short" });

  return `${datePart} · ${date.toLocaleTimeString("de-DE", {
    hour: "2-digit",
    minute: "2-digit",
  })}`;
}

function getTimelineStatus(reminder: Reminder) {
  if (reminder.status === "done") {
    return {
      badge: "bg-emerald-500/15 text-emerald-300",
      closed: true,
      icon: <CheckCircle2 className="h-4 w-4 text-emerald-300" />,
      iconBg: "bg-emerald-500/12",
      label: "Done",
    };
  }

  if (reminder.status === "cancelled") {
    return {
      badge: "bg-white/[0.06] text-white/30",
      closed: true,
      icon: <CheckCircle2 className="h-4 w-4 text-white/30" />,
      iconBg: "bg-white/[0.05]",
      label: "Cancelled",
    };
  }

  if (isReminderDue(reminder)) {
    return {
      badge: "bg-amber-500/15 text-amber-300",
      closed: false,
      icon: <AlarmClock className="h-4 w-4 text-amber-300" />,
      iconBg: "bg-amber-500/12",
      label: "Due now",
    };
  }

  if (reminder.status === "snoozed") {
    return {
      badge: "bg-violet-500/15 text-violet-300",
      closed: false,
      icon: <RotateCcw className="h-4 w-4 text-violet-300" />,
      iconBg: "bg-violet-500/12",
      label: "Snoozed",
    };
  }

  if (isSameLocalDay(getReminderDueAt(reminder), new Date())) {
    return {
      badge: "bg-sky-500/15 text-sky-300",
      closed: false,
      icon: <Clock3 className="h-4 w-4 text-sky-300" />,
      iconBg: "bg-sky-500/12",
      label: "Today",
    };
  }

  return {
    badge: "bg-white/[0.06] text-white/35",
    closed: false,
    icon: <CalendarDays className="h-4 w-4 text-white/35" />,
    iconBg: "bg-white/[0.05]",
    label: "Later",
  };
}