"use client";

import Link from "next/link";
import {
  AlarmClock,
  Check,
  Clock3,
  ExternalLink,
  Pencil,
  RotateCcw,
  Trash2,
} from "lucide-react";
import {
  getReminderDueAt,
  isReminderDue,
  REMINDER_RECURRENCE_LABELS,
  REMINDER_STATUS_LABELS,
  REMINDER_WEEKDAY_OPTIONS,
} from "@/lib/reminders";
import { cn, formatDate, formatTime } from "@/lib/utils";
import type { Reminder } from "@/types";

interface ReminderCardProps {
  onDelete: (reminderId: string) => void;
  onDone: (reminderId: string) => void;
  onEdit: (reminder: Reminder) => void;
  onSnooze: (reminderId: string, minutes: number) => void;
  reminder: Reminder;
}

const STATUS_STYLE = {
  scheduled: "border-sky-400/15 bg-sky-500/[0.07] text-sky-200",
  triggered: "border-amber-400/20 bg-amber-500/[0.10] text-amber-200",
  snoozed: "border-violet-400/15 bg-violet-500/[0.08] text-violet-200",
  done: "border-emerald-400/15 bg-emerald-500/[0.08] text-emerald-200",
  cancelled: "border-white/[0.06] bg-white/[0.025] text-white/30",
} as const;

export function ReminderCard({
  onDelete,
  onDone,
  onEdit,
  onSnooze,
  reminder,
}: ReminderCardProps) {
  const dueAt = getReminderDueAt(reminder);
  const due = isReminderDue(reminder);
  const closed = reminder.status === "done" || reminder.status === "cancelled";
  const recurrenceLabel =
    reminder.recurrence_rule === "weekdays" && (reminder.recurrence_days || []).length > 0
      ? (reminder.recurrence_days || [])
          .map((day) => REMINDER_WEEKDAY_OPTIONS.find((option) => option.value === day)?.label)
          .filter(Boolean)
          .join(", ")
      : REMINDER_RECURRENCE_LABELS[reminder.recurrence_rule];
  const isSnoozed = reminder.status === "snoozed";
  const isDone = reminder.status === "done";

  return (
    <article
      className={cn(
        "group relative flex flex-col overflow-hidden rounded-[28px] border bg-[#0e0c15] transition-all duration-300",
        due
          ? "border-amber-500/[0.18] shadow-[0_24px_64px_rgba(217,119,6,0.12)] hover:border-amber-500/30"
          : isDone
            ? "border-emerald-500/[0.14] hover:border-emerald-500/25"
            : isSnoozed
              ? "border-violet-500/[0.12] hover:border-violet-500/25"
              : "border-sky-500/[0.10] hover:border-sky-500/25",
        closed && "opacity-70",
      )}
    >
      <div
        className="relative min-h-[190px] flex-shrink-0 overflow-hidden"
        style={{
          background: due
            ? "radial-gradient(ellipse at 30% -20%, #92400e 0%, #78350f 22%, #0c0a10 62%)"
            : isDone
              ? "radial-gradient(ellipse at 30% -20%, #064e3b 0%, #065f46 20%, #0c0a10 62%)"
              : isSnoozed
                ? "radial-gradient(ellipse at 30% -20%, #4c1d95 0%, #3730a3 22%, #0c0a10 62%)"
                : "radial-gradient(ellipse at 30% -20%, #075985 0%, #1e3a8a 24%, #0c0a10 62%)",
        }}
      >
        <div className="absolute inset-x-0 top-0 flex items-start justify-between gap-2 p-4">
          <div className="flex flex-wrap items-center gap-1.5">
            <span
              className={cn(
                "rounded-full border px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.14em] backdrop-blur-sm",
                STATUS_STYLE[reminder.status],
              )}
            >
              {due ? "Due now" : REMINDER_STATUS_LABELS[reminder.status]}
            </span>
            {reminder.recurrence_rule !== "none" && (
              <span className="rounded-full border border-white/[0.08] bg-black/20 px-2.5 py-1 text-[10px] font-semibold text-white/42 backdrop-blur-sm">
                {recurrenceLabel}
              </span>
            )}
          </div>

          <div className="flex items-center gap-0.5 rounded-full border border-white/[0.08] bg-black/30 p-1 opacity-0 backdrop-blur-md transition-all duration-150 group-hover:opacity-100">
            {!closed && (
              <>
                <ActionBtn onClick={() => onEdit(reminder)} title="Edit">
                  <Pencil className="h-3.5 w-3.5" />
                </ActionBtn>
                <ActionBtn onClick={() => onDone(reminder.id)} title="Done">
                  <Check className="h-3.5 w-3.5" />
                </ActionBtn>
                <ActionBtn onClick={() => onSnooze(reminder.id, 15)} title="Snooze 15 min">
                  <RotateCcw className="h-3.5 w-3.5" />
                </ActionBtn>
              </>
            )}
            <ActionBtn onClick={() => onDelete(reminder.id)} title="Delete" danger>
              <Trash2 className="h-3.5 w-3.5" />
            </ActionBtn>
          </div>
        </div>

        <div className="absolute inset-x-0 bottom-0 px-5 pb-5 pt-20">
          <div className="mb-3 inline-flex items-center gap-1.5 rounded-full border border-white/[0.10] bg-black/20 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.14em] text-white/55 backdrop-blur-sm">
            <Clock3 className="h-3 w-3" />
            {formatDate(dueAt)} at {formatTime(dueAt)}
          </div>

          <div className="flex items-end gap-3">
            <div
              className={cn(
                "flex h-14 w-14 shrink-0 items-center justify-center rounded-[18px] border border-white/[0.10] bg-white/[0.08] shadow-xl shadow-black/40 backdrop-blur-sm",
                due ? "text-amber-200" : isDone ? "text-emerald-200" : isSnoozed ? "text-violet-200" : "text-sky-200",
              )}
            >
              <AlarmClock className="h-6 w-6" />
            </div>
            <div className="min-w-0 pb-0.5">
              <h3 className={cn("text-[20px] font-bold leading-tight tracking-tight text-white", closed && "line-through text-white/55")}>
                {reminder.title}
              </h3>
              {reminder.body && (
                <p className="mt-0.5 line-clamp-1 text-[12px] leading-relaxed text-white/45">
                  {reminder.body}
                </p>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className="flex flex-1 flex-col gap-3 p-5">
        <div className="rounded-2xl border border-white/[0.05] bg-white/[0.025] p-4">
          <div className="mb-2 flex items-center justify-between gap-2">
            <span className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/25">
              Reminder time
            </span>
            <span className={cn("font-mono text-[12px] font-semibold text-white/70", due && "text-amber-300")}>
              {formatTime(dueAt)}
            </span>
          </div>
          <p className="text-[12px] text-white/35">{formatDate(dueAt)}</p>
        </div>

        {(reminder.source_title || reminder.source_url || reminder.body) && (
          <div className="rounded-2xl border border-white/[0.05] bg-white/[0.02] p-3.5">
            <p className="text-[10px] font-bold uppercase tracking-[0.12em] text-white/25">
              Context
            </p>
            {reminder.body && (
              <p className="mt-1 line-clamp-2 text-[12px] leading-relaxed text-white/45">
                {reminder.body}
              </p>
            )}
            {(reminder.source_title || reminder.source_url) && (
              <div className="mt-2">
                {reminder.source_url ? (
                  <Link
                    href={reminder.source_url}
                    className="inline-flex items-center gap-1 text-[12px] font-semibold text-sky-200/80 transition-colors hover:text-sky-100"
                  >
                    {reminder.source_title || "Open source"}
                    <ExternalLink className="h-3.5 w-3.5" />
                  </Link>
                ) : (
                  <p className="text-[12px] font-semibold text-white/55">{reminder.source_title}</p>
                )}
              </div>
            )}
          </div>
        )}

        {!closed ? (
          <div className="mt-auto grid grid-cols-3 gap-2">
            <button
              type="button"
              onClick={() => onDone(reminder.id)}
              className="rounded-2xl border border-emerald-500/20 bg-emerald-500/[0.07] px-3 py-2.5 text-[12px] font-bold text-emerald-200 transition-all hover:bg-emerald-500/[0.12]"
            >
              Done
            </button>
            <button
              type="button"
              onClick={() => onSnooze(reminder.id, 15)}
              className="rounded-2xl border border-white/[0.07] bg-white/[0.03] px-3 py-2.5 text-[12px] font-semibold text-white/55 transition-all hover:bg-white/[0.06] hover:text-white/75"
            >
              15 min
            </button>
            <button
              type="button"
              onClick={() => onSnooze(reminder.id, 60)}
              className="rounded-2xl border border-white/[0.07] bg-white/[0.03] px-3 py-2.5 text-[12px] font-semibold text-white/55 transition-all hover:bg-white/[0.06] hover:text-white/75"
            >
              1 hour
            </button>
          </div>
        ) : (
          <div className="mt-auto rounded-2xl border border-white/[0.05] bg-white/[0.02] px-4 py-3 text-center text-[12px] font-semibold text-white/30">
            Closed reminder
          </div>
        )}
      </div>
    </article>
  );
}

function ActionBtn({
  children,
  danger,
  onClick,
  title,
}: {
  children: React.ReactNode;
  danger?: boolean;
  onClick: () => void;
  title: string;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      title={title}
      className={cn(
        "rounded-full p-1.5 transition-colors",
        danger
          ? "text-white/50 hover:bg-red-500/20 hover:text-red-300"
          : "text-white/55 hover:bg-white/10 hover:text-white",
      )}
    >
      {children}
    </button>
  );
}