import { useEffect, useRef, useState } from "react";
import { habitRequest, type TodayHabit } from "../lib/dashboard";
import { Button, SectionHeading } from "./design-system/primitives";
import { Card } from "./design-system/Card";
import { HabitHistory } from "./HabitHistory";

export function ArchivedHabits({ date, revision, onChanged, onExpired }: {
  date: string; revision: number; onChanged: () => void; onExpired: () => void;
}) {
  const [habits, setHabits] = useState<TodayHabit[]>([]);
  const [selected, setSelected] = useState<string>();
  const [error, setError] = useState("");
  const [notice, setNotice] = useState("");
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState(false);
  const [attempt, setAttempt] = useState(0);
  const saving = useRef(false);
  const expired = useRef(onExpired); expired.current = onExpired;
  useEffect(() => {
    const controller = new AbortController(); setLoading(true); setError("");
    habitRequest<{ habits: TodayHabit[] }>(`/days/${date}`, { signal: controller.signal })
      .then(data => { if (!controller.signal.aborted) setHabits(data.habits.filter(habit => habit.requirements?.archived)); })
      .catch(error => { if (!controller.signal.aborted) { setError(error.message); if (error.message.includes("session has expired")) expired.current(); } })
      .finally(() => { if (!controller.signal.aborted) setLoading(false); });
    return () => controller.abort();
  }, [date, revision, attempt]);
  async function restore(habit: TodayHabit) {
    if (saving.current) return;
    saving.current = true; setBusy(true); setError(""); setNotice("");
    try {
      await habitRequest(`/habits/${habit.habitId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ archived: false }) });
      setHabits(current => current.filter(item => item.habitId !== habit.habitId));
      setNotice(`${habit.name} restored. Check-ins resume today.`); onChanged();
    } catch (error) {
      const message = error instanceof Error ? error.message : "Could not restore. Try again.";
      setError(message); if (message.includes("session has expired")) expired.current();
    } finally { saving.current = false; setBusy(false); }
  }
  return <section className="ds-section" id="archived-habits" aria-label="Archived habits">
    <SectionHeading number="YOUR ARCHIVE" title="Archived habits" />
    <p>Restore a habit to resume its schedule today. Earlier history stays available.</p>
    {error && <p role="alert">{error} <Button onClick={() => setAttempt(value => value + 1)}>Retry archive</Button></p>}
    {loading ? <p role="status">Loading archive…</p> : !habits.length && <p>No archived habits.</p>}
    <p role="status">{notice}</p>
    {habits.map(habit => <Card key={habit.habitId} heading={habit.name ?? "Habit"}>
      <div className="ds-actions">
        <Button variant="secondary" disabled={busy || loading} onClick={() => void restore(habit)}>Restore {habit.name}</Button>
        <Button variant="text" onClick={() => setSelected(selected === habit.habitId ? undefined : habit.habitId)} aria-expanded={selected === habit.habitId}>{selected === habit.habitId ? "Hide history" : "View history"}</Button>
      </div>
      {selected === habit.habitId && <HabitHistory habit={habit} date={date} revision={revision + attempt} disabled={busy || loading} onExpired={onExpired} onHistorySaved={() => setAttempt(value => value + 1)} />}
    </Card>)}
  </section>;
}
