import { useState } from "react"
import { AlarmClock, Plus, Trash2, Loader2, X, Repeat } from "lucide-react"
import { api } from "@/lib/api"
import { useReminders, useQueryClient, qk } from "@/lib/queries"
import { useDialog } from "@/lib/useDialog"
import { cn } from "@/lib/utils"

// „Anstehendes": Erinnerungen & Routinen sichtbar und klickbar machen. Die API kann
// längst alles (Lucy legt per Stimme an) — hier kommt nur die GUI-Hälfte dazu.

const REPEAT_LABEL: Record<string, string> = {
  "": "einmalig", daily: "täglich", weekdays: "werktags", weekly: "wöchentlich",
}

export function ErinnerungenCard() {
  const { data: items = [], isLoading } = useReminders()
  const qc = useQueryClient()
  const { showAlert, showConfirm, dialogElement } = useDialog()
  const [showAdd, setShowAdd] = useState(false)
  const [text, setText] = useState("")
  const [when, setWhen] = useState("")
  const [repeat, setRepeat] = useState("")
  const [saving, setSaving] = useState(false)

  const reload = () => qc.invalidateQueries({ queryKey: qk.reminders })

  async function add() {
    if (!text.trim() || !when) return
    setSaving(true)
    try {
      await api("/api/reminders", { method: "POST", body: JSON.stringify({ text, when, repeat }) })
      setText(""); setWhen(""); setRepeat(""); setShowAdd(false)
      reload()
    } catch (e: any) {
      showAlert("Anlegen fehlgeschlagen", String(e?.message || e))
    } finally {
      setSaving(false)
    }
  }

  function del(id: number, t: string) {
    showConfirm("Erinnerung löschen?", `„${t}" wird entfernt.`, async () => {
      try { await api(`/api/reminders/${id}`, { method: "DELETE" }); reload() }
      catch (e: any) { showAlert("Fehler", String(e?.message || e)) }
    })
  }

  const sorted = [...items].sort((a, b) => a.next_ts - b.next_ts)

  return (
    <div className="mc-card p-4">
      <div className="mb-3 flex items-center justify-between">
        <span className="flex items-center gap-2 text-sm font-bold text-foreground">
          <span className="flex h-8 w-8 items-center justify-center rounded-lg border border-border/40 bg-background/30 text-amber-300">
            <AlarmClock className="h-4 w-4" />
          </span>
          Anstehendes
        </span>
        <button onClick={() => setShowAdd((s) => !s)}
          className="flex h-8 items-center gap-1 rounded-lg border border-border/60 bg-background/30 px-2.5 text-[11px] font-semibold text-muted-foreground hover:text-foreground hover:border-primary/40 transition-all cursor-pointer">
          {showAdd ? <X className="h-3.5 w-3.5" /> : <Plus className="h-3.5 w-3.5" />} {showAdd ? "Abbrechen" : "Neu"}
        </button>
      </div>

      {showAdd && (
        <div className="mb-3 space-y-2 rounded-xl border border-border/50 bg-background/30 p-3">
          <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Woran soll Lucy erinnern?"
            aria-label="Erinnerungstext"
            className="h-9 w-full rounded-lg border border-border/60 bg-card/45 px-3 text-xs text-foreground outline-none focus:ring-1 focus:ring-primary/50" />
          <div className="flex flex-wrap items-center gap-2">
            <input type="datetime-local" value={when} onChange={(e) => setWhen(e.target.value)}
              aria-label="Zeitpunkt"
              className="h-9 rounded-lg border border-border/60 bg-card/45 px-2 text-xs text-foreground outline-none focus:ring-1 focus:ring-primary/50 [color-scheme:dark]" />
            <select value={repeat} onChange={(e) => setRepeat(e.target.value)} aria-label="Wiederholung"
              className="h-9 cursor-pointer rounded-lg border border-border/60 bg-card/45 px-2 text-xs font-semibold text-foreground outline-none">
              {Object.entries(REPEAT_LABEL).map(([v, l]) => <option key={v} value={v} className="bg-popover">{l}</option>)}
            </select>
            <button onClick={add} disabled={saving || !text.trim() || !when}
              className="ml-auto flex h-9 items-center gap-1.5 rounded-lg bg-primary px-3 text-xs font-semibold text-primary-foreground hover:opacity-90 transition-all cursor-pointer disabled:opacity-50">
              {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Plus className="h-3.5 w-3.5" />} Anlegen
            </button>
          </div>
        </div>
      )}

      {isLoading ? (
        <p className="text-xs text-muted-foreground">Wird geladen …</p>
      ) : sorted.length === 0 ? (
        <p className="text-xs text-muted-foreground">Keine Erinnerungen. Lucy sagt dir hier (und per Stimme) Bescheid, wenn etwas ansteht.</p>
      ) : (
        <div className="space-y-1.5">
          {sorted.slice(0, 6).map((r) => {
            const overdue = r.next_ts * 1000 < Date.now() && !r.repeat
            return (
              <div key={r.id} className="group flex items-center justify-between gap-2 rounded-lg border border-border/40 bg-background/20 px-2.5 py-2">
                <div className="min-w-0">
                  <p className="truncate text-xs text-foreground">{r.text}</p>
                  <p className={cn("flex items-center gap-1.5 text-[10px]", overdue ? "text-amber-300" : "text-muted-foreground/70")}>
                    {new Date(r.next_ts * 1000).toLocaleString("de-DE", { weekday: "short", day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })}
                    {r.repeat && <span className="flex items-center gap-0.5"><Repeat className="h-2.5 w-2.5" />{REPEAT_LABEL[r.repeat] ?? r.repeat}</span>}
                    {overdue && "· überfällig"}
                  </p>
                </div>
                <button onClick={() => del(r.id, r.text)} aria-label="Erinnerung löschen"
                  className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border border-border/40 text-muted-foreground opacity-0 transition-all hover:bg-red-500/5 hover:text-red-400 group-hover:opacity-100 cursor-pointer">
                  <Trash2 className="h-3.5 w-3.5" />
                </button>
              </div>
            )
          })}
          {sorted.length > 6 && <p className="text-[10px] text-muted-foreground/60">+{sorted.length - 6} weitere</p>}
        </div>
      )}
      {dialogElement}
    </div>
  )
}
