import { useEffect, useMemo, useState } from "react";
import { Moon, Sun, ArrowRight, ArrowLeft, Check, RotateCcw, Bookmark, History, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";
import { Textarea } from "@/components/ui/textarea";
import { Input } from "@/components/ui/input";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { cn } from "@/lib/utils";
import { toast } from "@/hooks/use-toast";
import logo from "@/assets/jessica-logo.png";
import { useAIReflection } from "@/useAIReflection";

const FEELINGS = [
  "easy", "energizing", "calming", "playful", "thoughtful", "emotionally warm",
  "exciting", "comfortable", "awkward but interesting", "draining", "confusing",
  "surface-level", "tense", "disconnected", "natural", "hard to read",
];

const SLIDERS = [
  "I felt comfortable being myself",
  "Conversation flowed naturally",
  "Curiosity felt mutual",
  "I felt heard and understood",
  "I found myself overthinking",
  "We handled awkward moments well",
  "I wanted to know more about them",
  "The energy between us felt balanced",
];

const EASIEST = [
  "conversation", "humor", "curiosity", "shared energy", "silence",
  "emotional openness", "practical conversation", "getting comfortable",
  "nothing yet",
];


type State = {
  name: string;
  meeting: string;
  date: string;
  feelings: string[];
  sticking: string;
  sliders: number[];
  easiest: string[];
  surprise: string;
  curious: string;
};

type Saved = State & { savedAt: string; reflection?: string; ponderings?: string[] };

const STORAGE_KEY = "between-dates-state";
const THEME_KEY = "between-dates-theme";
const SAVED_KEY = "between-dates-reflections";

const initialState: State = {
  name: "",
  meeting: "",
  date: "",
  feelings: [],
  sticking: "",
  sliders: SLIDERS.map(() => 3),
  easiest: [],
  surprise: "",
  curious: "",
};

const SCREENS = 6; // 0 welcome, 1 details, 2 first impressions, 3 dynamic, 4 looking back, 5 reflection

function formatList(items: string[]): string {
  if (items.length === 0) return "";
  if (items.length === 1) return items[0];
  if (items.length === 2) return `${items[0]} and ${items[1]}`;
  return `${items.slice(0, -1).join(", ")}, and ${items[items.length - 1]}`;
}

function normalizeState(raw?: Partial<State> | null): State {
  const rawFeelings = Array.isArray(raw?.feelings) ? raw.feelings : [];
  const rawEasiest = Array.isArray(raw?.easiest) ? raw.easiest : [];
  const rawSliders = Array.isArray(raw?.sliders) ? raw.sliders : [];
  const feelings = Array.from(new Set(rawFeelings
    .map((item) => item === "awkward but intrigued" ? "awkward but interesting" : item)
    .filter(Boolean)));
  const easiest = Array.from(new Set(rawEasiest
    .map((item) => item === "nothing clicked naturally yet" ? "nothing yet" : item)
    .filter(Boolean)));
  const sliders = SLIDERS.map((_, i) => {
    const value = rawSliders[i];
    return typeof value === "number" && Number.isFinite(value) ? value : 3;
  });

  return {
    ...initialState,
    ...raw,
    feelings,
    easiest,
    sliders,
    sticking: raw?.sticking ?? "",
    surprise: raw?.surprise ?? "",
    curious: raw?.curious ?? "",
  };
}

function formatDate(iso: string): string {
  try {
    const d = new Date(iso);
    return d.toLocaleString(undefined, {
      month: "short", day: "numeric", year: "numeric",
      hour: "numeric", minute: "2-digit",
    });
  } catch { return iso; }
}

export default function Index() {
  const [screen, setScreen] = useState(0);
  const [state, setState] = useState<State>(initialState);
  const [dark, setDark] = useState(false);
  const [historyOpen, setHistoryOpen] = useState(false);
  const [saved, setSaved] = useState<Saved[]>([]);

  useEffect(() => {
    try {
      const t = localStorage.getItem(THEME_KEY);
      if (t === "dark") { setDark(true); document.documentElement.classList.add("dark"); }
      // Always start each session fresh - do not restore active draft answers.
      // Previous reflections are kept under SAVED_KEY for the History archive only.
      localStorage.removeItem(STORAGE_KEY);
      const savedRaw = localStorage.getItem(SAVED_KEY);
      if (savedRaw) {
        const parsed: Saved[] = JSON.parse(savedRaw);
        setSaved(parsed.map((p) => ({ ...normalizeState(p), savedAt: p.savedAt })));
      }
    } catch {}
  }, []);

  const toggleDark = () => {
    const next = !dark;
    setDark(next);
    document.documentElement.classList.toggle("dark", next);
    try { localStorage.setItem(THEME_KEY, next ? "dark" : "light"); } catch {}
  };

  const toggleIn = (key: "feelings" | "easiest", v: string) =>
    setState((s) => ({
      ...s,
      [key]: s[key].includes(v) ? s[key].filter((x) => x !== v) : [...s[key], v],
    }));

  const reset = () => {
    setState(initialState);
    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(initialState)); } catch {}
    setScreen(0);
  };

  const saveReflection = (reflectionOverride?: string, ponderingsOverride?: string[]) => {
    try {
      const rawList: Saved[] = JSON.parse(localStorage.getItem(SAVED_KEY) || "[]");
      const list: Saved[] = rawList.map((p) => ({ ...normalizeState(p), savedAt: p.savedAt }));
      const normalized = normalizeState(state);
      const reflection = reflectionOverride && reflectionOverride.trim().length > 0 ? reflectionOverride : buildSummary(normalized);
      const ponderings = ponderingsOverride && ponderingsOverride.length > 0 ? ponderingsOverride : buildPonderingsList(normalized);
      const next: Saved[] = [{ ...normalized, savedAt: new Date().toISOString(), reflection, ponderings }, ...list].slice(0, 50);
      localStorage.setItem(SAVED_KEY, JSON.stringify(next));
      setSaved(next);
      setState(initialState);
      localStorage.setItem(STORAGE_KEY, JSON.stringify(initialState));
      setScreen(0);
      toast({ title: "Saved.", description: "Private and just yours." });
    } catch {
      toast({ title: "Couldn't save", description: "Storage is unavailable." });
    }
  };

  const deleteSaved = (savedAt: string) => {
    const next = saved.filter((s) => s.savedAt !== savedAt);
    setSaved(next);
    try { localStorage.setItem(SAVED_KEY, JSON.stringify(next)); } catch {}
  };

  return (
    <div className="min-h-screen flex flex-col">
      <div aria-hidden className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
        <div className="absolute -top-24 -left-24 w-72 h-72 rounded-full bg-secondary/30 blur-3xl animate-float-slow" />
        <div className="absolute -bottom-32 -right-20 w-80 h-80 rounded-full bg-primary/20 blur-3xl animate-float-slow" style={{ animationDelay: "-7s" }} />
      </div>

      <header className="px-5 pt-5 pb-3 flex items-center justify-between max-w-xl w-full mx-auto">
        <div className="flex items-center gap-2.5">
          <LogoBadge size={32} />
          <span className="text-sm font-medium tracking-wide text-foreground/80">Between Dates</span>
        </div>
        <div className="flex items-center gap-1">
          <Sheet open={historyOpen} onOpenChange={setHistoryOpen}>
            <SheetTrigger asChild>
              <button
                aria-label="View saved check-ins"
                className="p-2 rounded-full hover:bg-muted transition-smooth"
              >
                <History className="w-4 h-4" />
              </button>
            </SheetTrigger>
            <SheetContent side="bottom" className="max-h-[85vh] overflow-y-auto rounded-t-3xl">
              <SheetHeader>
                <SheetTitle className="text-left">Your check-ins</SheetTitle>
              </SheetHeader>
              <HistoryList items={saved} onDelete={deleteSaved} />
            </SheetContent>
          </Sheet>
          <button
            onClick={toggleDark}
            aria-label="Toggle dark mode"
            className="p-2 rounded-full hover:bg-muted transition-smooth"
          >
            {dark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
          </button>
        </div>
      </header>

      {screen > 0 && screen < SCREENS - 1 && (
        <div className="max-w-xl w-full mx-auto px-5">
          <Progress current={screen} total={SCREENS - 2} />
        </div>
      )}

      <main className="flex-1 max-w-xl w-full mx-auto px-5 py-6 pb-12">
        {screen === 0 && <Welcome onStart={() => setScreen(1)} />}

        {screen === 1 && (
          <Screen title="A little context" subtitle="Want to save this check-in for later?">
            <div className="space-y-4">
              <FieldInput
                label="Name or initials"
                value={state.name}
                onChange={(v) => setState((s) => ({ ...s, name: v }))}
                placeholder="David"
              />
              <FieldInput
                label="Which meeting was this?"
                value={state.meeting}
                onChange={(v) => setState((s) => ({ ...s, meeting: v }))}
                placeholder="3rd meeting"
              />
              <FieldInput
                label="Calendar date"
                value={state.date}
                onChange={(v) => setState((s) => ({ ...s, date: v }))}
                placeholder="5/5/25"
              />
            </div>
          </Screen>
        )}

        {screen === 2 && (
          <Screen title="What did the date feel like for you?" subtitle="Pick anything that fits - there's no wrong answer.">
            <ChipGrid options={FEELINGS} selected={state.feelings} onToggle={(v) => toggleIn("feelings", v)} />
            <Field
              label="What stuck with me the most from the date was..."
              value={state.sticking}
              onChange={(v) => setState((s) => ({ ...s, sticking: v }))}
              placeholder="a moment, a look, something someone said..."
            />
          </Screen>
        )}

        {screen === 3 && (
          <Screen
            title="How it felt between you"
            subtitle="Every date has its own rhythm. Here's a chance to notice what the interaction felt like for you."
          >
            <div className="space-y-6">
              {SLIDERS.map((label, i) => (
                <SliderRow
                  key={label}
                  label={label}
                  value={state.sliders[i]}
                  onChange={(v) =>
                    setState((s) => {
                      const next = [...s.sliders];
                      next[i] = v;
                      return { ...s, sliders: next };
                    })
                  }
                />
              ))}
            </div>
          </Screen>
        )}

        {screen === 4 && (
          <Screen title="A few more thoughts">
            <div className="space-y-2">
              <p className="text-sm font-medium text-foreground/90">What felt easiest between you?</p>
              <ChipGrid options={EASIEST} selected={state.easiest} onToggle={(v) => toggleIn("easiest", v)} />
            </div>
            <Field
              label="Something that surprised me was..."
              value={state.surprise}
              onChange={(v) => setState((s) => ({ ...s, surprise: v }))}
              placeholder="Something you didn't expect…"
            />
            <Field
              label="I'm still curious about..."
              value={state.curious}
              onChange={(v) => setState((s) => ({ ...s, curious: v }))}
              placeholder="something about them, a question you have, something unsaid..."
            />
          </Screen>
        )}

        {screen === 5 && (
          <Reflection state={state} onSave={saveReflection} onReset={reset} />
        )}

        {screen > 0 && screen < SCREENS - 1 && (
          <Nav
            onBack={() => setScreen((s) => s === 1 ? 2 : Math.max(0, s - 1))}
            onNext={() => setScreen((s) => Math.min(SCREENS - 1, s + 1))}
            backLabel={screen === 1 ? "Skip" : "Back"}
            nextLabel={screen === SCREENS - 2 ? "See reflection" : "Continue"}
          />
        )}
      </main>

      <footer className="text-center text-xs text-muted-foreground pb-6 px-5">
        {screen === 0 ? (
          "Your reflections stay here, private and just yours."
        ) : (
          <>
            Created by Jessica Feldman{" "}
            <a
              href="https://www.DatingAndMarriageCoach.com"
              target="_blank"
              rel="noopener noreferrer"
              className="underline hover:text-foreground transition-smooth"
            >
              www.DatingAndMarriageCoach.com
            </a>
          </>
        )}
      </footer>
    </div>
  );
}

/* ---------------- components ---------------- */

function LogoBadge({ size = 32 }: { size?: number }) {
  return (
    <div
      className="rounded-full overflow-hidden ring-1 ring-border bg-[hsl(var(--brand-cream))] shadow-card flex items-center justify-center shrink-0"
      style={{ width: size, height: size }}
    >
      <img src={logo} alt="Jessica Feldman, Dating and Marriage Coach" className="w-full h-full object-cover" />
    </div>
  );
}

function Progress({ current, total }: { current: number; total: number }) {
  const pct = (current / total) * 100;
  return (
    <div className="mb-2">
      <div className="h-1.5 rounded-full bg-muted overflow-hidden">
        <div
          className="h-full transition-smooth rounded-full"
          style={{ width: `${pct}%`, background: "var(--gradient-brand)" }}
        />
      </div>
      <div className="mt-1.5 text-[11px] text-muted-foreground tracking-wide">
        Step {current} of {total}
      </div>
    </div>
  );
}

function Welcome({ onStart }: { onStart: () => void }) {
  return (
    <div className="animate-fade-up flex flex-col items-center text-center pt-6 sm:pt-10">
      <LogoBadge size={96} />
      <h1 className="mt-8 text-5xl sm:text-6xl font-semibold leading-[1.05] mb-5">
        <span className="gradient-brand-text">Between Dates</span>
      </h1>
      <p className="text-base sm:text-lg text-muted-foreground max-w-md leading-relaxed mb-10">
        The date just ended. <br />
        Let's figure out how you really feel about it.
      </p>
      <Button
        size="lg"
        onClick={onStart}
        className="rounded-full px-8 h-12 text-base shadow-soft transition-smooth hover:scale-[1.02]"
        style={{ background: "var(--gradient-brand)" }}
      >
        Let's Start
        <ArrowRight className="w-4 h-4 ml-1" />
      </Button>
      
    </div>
  );
}

function Screen({
  title, subtitle, children,
}: { title: string; subtitle?: string; children: React.ReactNode }) {
  return (
    <section className="animate-fade-up">
      <h2 className="text-2xl sm:text-3xl font-semibold mb-2 leading-tight">{title}</h2>
      {subtitle && <p className="text-muted-foreground text-sm sm:text-base mb-6 leading-relaxed">{subtitle}</p>}
      <div className="rounded-3xl bg-card/80 backdrop-blur-sm border border-border/60 shadow-card p-5 sm:p-6 space-y-6">
        {children}
      </div>
    </section>
  );
}

function ChipGrid({
  options, selected, onToggle, stacked,
}: { options: string[]; selected: string[]; onToggle: (v: string) => void; stacked?: boolean }) {
  return (
    <div className={cn("flex flex-wrap gap-2", stacked && "flex-col")}>
      {options.map((o) => {
        const on = selected.includes(o);
        return (
          <button
            key={o}
            onClick={() => onToggle(o)}
            className={cn(
              "transition-smooth text-left rounded-2xl border px-4 py-2.5 text-sm leading-snug",
              stacked ? "w-full" : "",
              on
                ? "border-transparent text-primary-foreground shadow-soft"
                : "bg-background/60 border-border hover:border-secondary/60 hover:bg-secondary/10"
            )}
            style={on ? { background: "var(--gradient-brand)" } : undefined}
            aria-pressed={on}
          >
            <span className="inline-flex items-center gap-2">
              {on && <Check className="w-3.5 h-3.5 shrink-0" />}
              {o}
            </span>
          </button>
        );
      })}
    </div>
  );
}

function Field({
  label, value, onChange, placeholder,
}: { label: string; value: string; onChange: (v: string) => void; placeholder?: string }) {
  return (
    <div className="space-y-2 pt-2">
      <label className="block text-sm font-medium text-foreground/90">{label}</label>
      <Textarea
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="rounded-2xl bg-background/70 border-border min-h-[88px] resize-none"
      />
    </div>
  );
}

function FieldInput({
  label, value, onChange, placeholder,
}: { label: string; value: string; onChange: (v: string) => void; placeholder?: string }) {
  return (
    <div className="space-y-2">
      <label className="block text-sm font-medium text-foreground/90">{label}</label>
      <Input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="rounded-2xl bg-background/70 border-border h-11"
      />
    </div>
  );
}

function SliderRow({
  label, value, onChange,
}: { label: string; value: number; onChange: (v: number) => void }) {
  return (
    <div>
      <div className="flex items-baseline justify-between gap-3 mb-2">
        <span className="text-sm text-foreground/90 leading-snug">{label}</span>
        <span className="text-xs font-medium text-primary tabular-nums">{value}/5</span>
      </div>
      <Slider
        min={1}
        max={5}
        step={1}
        value={[value]}
        onValueChange={(v) => onChange(v[0])}
        className="py-1"
      />
    </div>
  );
}

function Nav({
  onBack, onNext, backLabel, nextLabel,
}: { onBack: () => void; onNext: () => void; backLabel: string; nextLabel: string }) {
  const isSkip = backLabel === "Skip";
  return (
    <div className="mt-6 flex items-center justify-between gap-3">
      <Button variant="ghost" onClick={onBack} className="rounded-full">
        {!isSkip && <ArrowLeft className="w-4 h-4" />} {backLabel}
      </Button>
      <Button
        onClick={onNext}
        className="rounded-full px-6 h-11 shadow-soft transition-smooth hover:scale-[1.02]"
        style={{ background: "var(--gradient-brand)" }}
      >
        {nextLabel} <ArrowRight className="w-4 h-4" />
      </Button>
    </div>
  );
}

function Reflection({
  state, onSave, onReset,
}: { state: State; onSave: (reflection?: string, ponderings?: string[]) => void; onReset: () => void }) {
  const { reflection, ponderings, loading, error } = useAIReflection(state);
  const displayReflection = reflection || buildSummary(state);
  const displayPonderings = ponderings.length > 0 ? ponderings : buildPonderingsList(state);
  return (
    <section className="animate-fade-up space-y-6">
      <div className="text-center pt-2">
        <h2 className="text-3xl font-semibold leading-tight gradient-brand-text">A little clarity</h2>
      </div>

      {loading ? (
        <div className="rounded-3xl p-6 sm:p-7 shadow-soft border border-border/60 bg-card/85 backdrop-blur text-center">
          <p className="text-base sm:text-[17px] leading-relaxed text-foreground/70 italic">Thinking about your date...</p>
        </div>
      ) : (
        <div className="rounded-3xl p-6 sm:p-7 shadow-soft border border-border/60 bg-card/85 backdrop-blur">
          <p className="text-base sm:text-[17px] leading-relaxed text-foreground/90 whitespace-pre-line">{displayReflection}</p>
          {error && (
            <p className="mt-3 text-xs text-muted-foreground italic">Showing a backup reflection — couldn't reach the AI just now.</p>
          )}
        </div>
      )}

      <div className="rounded-3xl p-5 sm:p-6 border border-border/60 bg-background/40 backdrop-blur">
        <p className="text-sm font-medium text-foreground/90 mb-3">Worth Thinking About</p>
        <ul className="space-y-3">
          {displayPonderings.map((p) => (
            <li key={p} className="flex gap-3 text-sm sm:text-[15px] leading-relaxed text-foreground/80">
              <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-secondary shrink-0" />
              {p}
            </li>
          ))}
        </ul>
      </div>

      <div className="flex flex-col sm:flex-row gap-3 pt-2">
        <Button
          onClick={() => onSave(displayReflection, displayPonderings)}
          className="rounded-full h-12 flex-1 shadow-soft text-base"
          style={{ background: "var(--gradient-brand)" }}
        >
          <Bookmark className="w-4 h-4" /> Save It
        </Button>
        <Button
          onClick={onReset}
          variant="outline"
          className="rounded-full h-12 flex-1 text-base bg-background/60"
        >
          <RotateCcw className="w-4 h-4" /> Start Again
        </Button>
      </div>
      <p className="text-center text-xs text-muted-foreground px-4">
        You can always come back to this reflection later with fresh perspective.
      </p>
    </section>
  );
}

function buildSliderHighlights(sliders: number[]): string[] {
  // SLIDERS index map:
  // 0 comfort, 1 flow, 2 mutual curiosity, 3 heard, 4 overthinking,
  // 5 awkward, 6 want more, 7 energy balanced
  const map: Array<{ i: number; high?: string; low?: string }> = [
    { i: 0, high: "You felt comfortable being yourself", low: "It was hard to fully relax" },
    { i: 1, high: "Conversation came easily", low: "Conversation took some effort" },
    { i: 2, high: "The interest felt mutual", low: "The curiosity felt a little one-sided" },
    { i: 3, high: "You felt genuinely heard", low: "You didn't feel fully heard" },
    { i: 4, high: "You found yourself overthinking" },
    { i: 6, high: "You wanted to know more", low: "You weren't sure you wanted more" },
    { i: 7, high: "The energy felt balanced", low: "The energy felt a little uneven" },
  ];
  const highs: string[] = [];
  const lows: string[] = [];
  for (const m of map) {
    const v = sliders[m.i];
    if (typeof v !== "number") continue;
    if (v >= 4 && m.high) highs.push(m.high);
    else if (v <= 2 && m.low) lows.push(m.low);
  }
  const negCount = sliders.filter((v) => typeof v === "number" && v <= 2).length;
  if (negCount >= 3) return lows;
  return [...highs, ...lows];
}

function HistoryList({ items, onDelete }: { items: Saved[]; onDelete: (savedAt: string) => void }) {
  if (items.length === 0) {
    return (
      <div className="py-10 text-center text-sm text-muted-foreground">
        Nothing saved yet. After your next date, this is where your reflections will be.
      </div>
    );
  }
  return (
    <div className="mt-4 space-y-4 pb-6">
      {items.map((raw) => {
        const it: Saved = { ...initialState, ...raw } as Saved;
        const summary = it.reflection ?? buildSummary(it);
        const ponderings = it.ponderings ?? buildPonderingsList(it);
        const header = [it.name, it.meeting, it.date].filter(Boolean).join(" · ");
        const sliderHighlights = buildSliderHighlights(it.sliders);
        const easiestFiltered = it.easiest.filter((e) => e !== "nothing yet");
        return (
          <div key={it.savedAt} className="rounded-2xl border border-border/60 bg-card/80 p-4 space-y-3">
            <div className="flex items-start justify-between gap-3">
              <div className="space-y-0.5">
                {header && <div className="text-sm font-medium text-foreground/90">{header}</div>}
                <div className="text-xs text-muted-foreground">Saved {formatDate(it.savedAt)}</div>
              </div>
              <button
                onClick={() => onDelete(it.savedAt)}
                aria-label="Delete check-in"
                className="p-1.5 rounded-full hover:bg-muted transition-smooth text-muted-foreground hover:text-destructive"
              >
                <Trash2 className="w-3.5 h-3.5" />
              </button>
            </div>

            {it.feelings.length > 0 && (
              <div className="flex flex-wrap gap-1.5">
                {it.feelings.map((f) => (
                  <span key={f} className="text-[11px] rounded-full px-2.5 py-1 bg-secondary/15 text-foreground/80">
                    {f}
                  </span>
                ))}
              </div>
            )}

            {sliderHighlights.length > 0 && (() => {
              const OVERTHINK = "You found yourself overthinking";
              const others = sliderHighlights.filter((h) => h !== OVERTHINK);
              const hasOverthink = sliderHighlights.includes(OVERTHINK);
              return (
                <ul className="space-y-1 text-sm text-foreground/80">
                  {others.map((h) => (
                    <li key={h}>{h}</li>
                  ))}
                  {hasOverthink && (
                    <li>
                      <span className="text-xs text-muted-foreground">Worth noticing: </span>
                      {OVERTHINK}
                    </li>
                  )}
                </ul>
              );
            })()}

            {isFilled(it.sticking) && (
              <div className="text-sm text-foreground/85">
                <span className="text-xs text-muted-foreground block mb-1">I couldn't stop thinking about:</span>
                {it.sticking}
              </div>
            )}

            {easiestFiltered.length > 0 && (
              <div className="text-sm text-foreground/85">
                <span className="text-xs text-muted-foreground block mb-1">Easiest between you:</span>
                {formatList(easiestFiltered)}
              </div>
            )}

            {isFilled(it.surprise) && (
              <div className="text-sm text-foreground/85">
                <span className="text-xs text-muted-foreground block mb-1">Something that surprised me:</span>
                {it.surprise}
              </div>
            )}

            {isFilled(it.curious) && (
              <div className="text-sm text-foreground/85">
                <span className="text-xs text-muted-foreground block mb-1">I was still wondering about:</span>
                {it.curious}
              </div>
            )}

            <div className="text-sm text-foreground/90 leading-relaxed pt-2 border-t border-border/60 whitespace-pre-line">
              {summary}
            </div>

            {ponderings.length > 0 && (
              <div className="rounded-2xl p-4 border border-border/60 bg-background/40">
                <p className="text-xs font-medium text-foreground/90 mb-2">Worth Thinking About</p>
                <ul className="space-y-2">
                  {ponderings.map((p) => (
                    <li key={p} className="flex gap-2 text-sm leading-relaxed text-foreground/80">
                      <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-secondary shrink-0" />
                      {p}
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

// ── helpers ──────────────────────────────────────────────────

function isFilled(t: string | undefined | null): boolean {
  const trimmed = (t ?? "").trim();
  if (!trimmed) return false;
  const first = trimmed.split(/\s+/)[0].toLowerCase().replace(/[^a-z']/g, "");
  return first !== "nothing";
}

const NEGATIVE_FEELINGS = new Set(["draining", "disconnected", "tense", "surface-level", "confusing"]);
const POSITIVE_FEELINGS = new Set(["easy", "energizing", "calming", "playful", "thoughtful", "emotionally warm", "exciting", "comfortable", "natural"]);

function isPredominantlyNegative(s: State): boolean {
  const neg = s.feelings.filter((f) => NEGATIVE_FEELINGS.has(f)).length;
  const pos = s.feelings.filter((f) => POSITIVE_FEELINGS.has(f)).length;
  if (neg === 0 || neg < pos) return false;
  const lowCount = s.sliders.filter((v) => typeof v === "number" && v <= 2).length;
  return lowCount >= 4;
}

const SENSORY_WORDS = new Set(["smell", "smelled", "smells", "scent", "scents", "look", "looks", "looked", "looking", "appearance", "voice", "sounded", "sounds", "eyes", "hands", "touch", "kiss", "kissed", "hug", "hugged", "face", "body", "tall", "short", "attractive", "hot", "lips", "skin", "size", "sized", "height", "weight", "breath", "breathed"]);
function hasSensory(t: string): boolean {
  const words = t.toLowerCase().split(/[^a-z']+/).filter(Boolean);
  return words.some((w) => SENSORY_WORDS.has(w));
}

function fieldTokens(t: string): string[] {
  return (t || "").toLowerCase().split(/[^a-z']+/).filter((w) => w.length > 2);
}
function similarText(a: string, b: string): boolean {
  const A = new Set(fieldTokens(a));
  const B = new Set(fieldTokens(b));
  if (A.size === 0 || B.size === 0) return false;
  let shared = 0;
  A.forEach((w) => { if (B.has(w)) shared++; });
  const minSize = Math.min(A.size, B.size);
  return shared / minSize > 0.5;
}
function dedupeFields(s: State): { merged: boolean; anchor: string } {
  const sticking = isFilled(s.sticking) ? s.sticking.trim() : "";
  const surprise = isFilled(s.surprise) ? s.surprise.trim() : "";
  const curious = isFilled(s.curious) ? s.curious.trim() : "";
  const filled = [sticking, surprise, curious].filter(Boolean);
  let pairs = 0;
  for (let i = 0; i < filled.length; i++)
    for (let j = i + 1; j < filled.length; j++)
      if (similarText(filled[i], filled[j])) pairs++;
  if (pairs === 0) return { merged: false, anchor: "" };
  return { merged: true, anchor: sticking || surprise || curious };
}

function makeSeed(s: State): number {
  const str = JSON.stringify([s.feelings, s.sliders, s.easiest, s.sticking]);
  let seed = 0;
  for (let i = 0; i < str.length; i++) seed = (seed * 31 + str.charCodeAt(i)) >>> 0;
  return seed;
}

function seededPick<T>(arr: T[], seed: number, offset = 0): T {
  const len = arr?.length ?? 0;
  if (len === 0) return undefined as unknown as T;
  const idx = (((seed >>> offset) + offset) % len + len) % len;
  return arr[idx];
}

function mirrorToYou(text: string): string {
  return text
    .replace(/\bi\b/g, "I")
    .replace(/\bI\b/g, "you")
    .replace(/\bme\b/g, "you")
    .replace(/\bMe\b/g, "you")
    .replace(/\bmy\b/g, "your")
    .replace(/\bMy\b/g, "your")
    .replace(/\bmine\b/g, "yours")
    .replace(/\bMine\b/g, "yours")
    .replace(/\bmyself\b/g, "yourself")
    .replace(/\bMyself\b/g, "yourself");
}

function isGeneralObservation(text: string): boolean {
  const t = text.trim().toLowerCase();
  return t.startsWith("how") || t.startsWith("that") || t.startsWith("the fact that");
}

// ── feeling → natural phrase ──────────────────────────────────

const FEELING_PHRASES: Record<string, string[]> = {
  "easy":                  ["it felt easy", "something about it just felt easy"],
  "energizing":            ["it left you feeling a little energized", "there was something energizing about it"],
  "calming":               ["there was something calming about it", "it felt calming, in a good way"],
  "playful":               ["it had a playful feeling to it", "there was a lightness, a playfulness"],
  "thoughtful":            ["it felt thoughtful", "there was something quietly thoughtful about it"],
  "emotionally warm":      ["it felt genuinely warm", "there was real warmth in it"],
  "exciting":              ["there was something exciting about it", "it felt exciting in places"],
  "comfortable":           ["it felt comfortable", "there was an ease, a comfort to it"],
  "awkward but interesting": ["it felt a little awkward - but interesting too", "there was some awkwardness, though something interesting underneath it"],
  "draining":              ["it left you a little drained", "something about it felt draining"],
  "confusing":             ["it left you feeling a bit confused", "some of it was hard to make sense of"],
  "surface-level":         ["it stayed fairly surface-level", "it felt like things stayed pretty surface-level"],
  "tense":                 ["there was some tension in it", "it felt a little tense at times"],
  "disconnected":          ["something felt a little disconnected", "there was a sense of disconnect in parts"],
  "natural":               ["it felt natural", "something about it just felt natural"],
  "hard to read":          ["it was hard to read", "parts of it were just hard to read"],
};

function feelingPhrase(feeling: string, seed: number): string {
  const options = FEELING_PHRASES[feeling];
  if (!options) return `it felt ${feeling}`;
  return seededPick(options, seed, 2);
}

// ── opening sentence ─────────────────────────────────────────

function buildOpening(feelings: string[], seed: number): string {
  if (feelings.length === 0) {
    return seededPick([
      "It's hard to fully name what this one was.",
      "This one hasn't fully settled yet - and that's okay.",
      "It may take a little time before this one makes sense.",
    ], seed);
  }

  if (feelings.length === 1) {
    const phrase = feelingPhrase(feelings[0], seed);
    return seededPick([
      `${phrase[0].toUpperCase()}${phrase.slice(1)}.`,
      `More than anything, ${phrase}.`,
      `If you had to sum it up - ${phrase}.`,
    ], seed, 3);
  }

  // 2 or more feelings
  const a = feelingPhrase(feelings[0], seed);
  let b = feelingPhrase(feelings[1], seed + 1);

  // Detect contrast between feelings
  function isContrast(x: string, y: string): boolean {
    const positive = new Set(["easy", "energizing", "calming", "playful", "thoughtful", "emotionally warm", "exciting", "comfortable", "natural"]);
    const negative = new Set(["draining", "confusing", "surface-level", "tense", "disconnected", "hard to read"]);
    const xPos = positive.has(x);
    const xNeg = negative.has(x);
    const yPos = positive.has(y);
    const yNeg = negative.has(y);
    return (xPos && yNeg) || (xNeg && yPos);
  }
  const contrast = isContrast(feelings[0], feelings[1]);

  // Avoid both phrases starting with the same opener
  const openers = ["it left you feeling", "it left you", "there was something", "there was a", "there was", "it felt", "it had", "something about it", "something felt", "some of it"];
  const startsWithSame = (x: string, y: string) => {
    const xl = x.toLowerCase();
    const yl = y.toLowerCase();
    return openers.some(o => xl.startsWith(o) && yl.startsWith(o));
  };
  if (startsWithSame(a, b)) {
    // Strip the matched opener from b and reshape
    const bl = b.toLowerCase();
    const matched = openers.find(o => bl.startsWith(o)) || "";
    const rest = b.slice(matched.length).trim().replace(/^,\s*/, "");
    const reshaped = seededPick([
      `somehow ${rest}`,
      `at the same time, ${rest}`,
    ], seed + 2, 5);
    b = reshaped;
  }

  const connector = contrast ? "and yet" : "and";

  return seededPick([
    `${a[0].toUpperCase()}${a.slice(1)}, ${connector} ${b} too.`,
    `${a[0].toUpperCase()}${a.slice(1)}, though ${b} as well.`,
    `There was a mix: ${a}, ${connector} ${b}.`,
  ], seed, 4);
}

// ── connection sentence ─────────────────────────────────────

function buildConnection(s: State, seed: number): string | null {
  const flow       = s.sliders[1]; // Conversation flowed naturally
  const comfort    = s.sliders[0]; // I felt comfortable being myself
  const heard      = s.sliders[3]; // I felt heard and understood
  const curiosity  = s.sliders[2]; // Curiosity felt mutual
  const wantMore   = s.sliders[6]; // I wanted to know more about them
  const balance    = s.sliders[7]; // The energy between us felt balanced

  const positives: string[][] = [];

  if (flow >= 4) positives.push([
    "talking came pretty easily, like neither of you had to work for it",
    "the conversation seemed to find its own rhythm without much effort",
    "there was a flow to it - the words came without you having to reach for them",
  ]);

  if (comfort >= 4 && s.feelings.includes("comfortable")) positives.push([
    "you felt comfortable enough to actually be yourself, not a polished version",
    "there was a real comfort to it - nothing forced, nothing performed",
    "something about the space between you felt safe enough to relax into",
  ]);

  if (heard >= 4) positives.push([
    "you felt genuinely heard, like what you said actually landed",
    "there were moments you felt truly listened to, not just waited on",
    "it felt like the things you shared were being received, not just heard",
  ]);

  if (curiosity >= 4) positives.push([
    "the curiosity felt like it went both ways, not just you reaching",
    "both of you seemed genuinely interested in the other person",
    "there was a real mutual interest there - the kind that's hard to fake",
  ]);

  if (wantMore >= 4) positives.push([
    "part of you is already thinking about what comes next",
    "there's something in you that isn't quite done with this yet",
    "you found yourself wanting to keep going, even after it ended",
  ]);

  if (balance >= 4) positives.push([
    "the energy felt fairly balanced between you - neither pulling more than the other",
    "it didn't feel one-sided, which is more rare than people admit",
  ]);

  // Fallback to easiest chips
  if (positives.length === 0) {
    if (s.easiest.includes("humor")) positives.push(["laughing together came pretty easily, and that means something"]);
    if (s.easiest.includes("conversation")) positives.push(["the conversation didn't seem to take much effort to keep alive"]);
    if (s.easiest.includes("shared energy")) positives.push(["there was a shared energy that made things feel a little easier"]);
    if (s.easiest.includes("silence")) positives.push(["even the quiet moments felt okay - which says something on its own"]);
  }

  if (positives.length === 0) return null;

  const chosen = seededPick(positives, seed, 5);
  const phrase = seededPick(chosen, seed, 6);

  const P = phrase[0].toUpperCase() + phrase.slice(1);

  return seededPick([
    `${P}.`,
    `It sounds like ${phrase}.`,
  ], seed, 7);
}

// ── closing sentence ─────────────────────────────────────────

function buildClosing(s: State, seed: number): string | null {
  const overthink = s.sliders[4]; // I found myself overthinking
  const wantMore  = s.sliders[6]; // I wanted to know more about them
  const comfort   = s.sliders[0];
  const flow      = s.sliders[1];
  const balance   = s.sliders[7];

  const closings: string[][] = [];

  if (overthink >= 4) closings.push([
    "Some of it is still with you, even now.",
    "Part of you is still turning this over.",
    "It's okay that some of this is still sitting with you.",
  ]);

  if (wantMore >= 4 && balance <= 2) closings.push([
    "You might still be figuring out where you actually stand.",
    "It's not entirely clear yet how you feel - and that's okay.",
    "There's still something to figure out about what you're feeling.",
  ]);

  else if (wantMore >= 4) closings.push([
    "Part of you is already thinking about what comes next.",
    "There's something in you that isn't quite done with this yet.",
    "There's a quiet pull to see them again.",
  ]);

  if (balance <= 2 && closings.length === 0) closings.push([
    "The balance between you might still feel a little off.",
    "Something about the dynamic didn't quite feel even yet.",
  ]);

  if ((comfort <= 2 || flow <= 2) && closings.length === 0) closings.push([
    "Not everything clicked - and that's worth noticing, not judging.",
    "Some things didn't quite land, which is okay too.",
    "There's still some figuring out to do.",
  ]);

  if (closings.length === 0) return null;

  const chosen = seededPick(closings, seed, 8);
  return seededPick(chosen, seed, 9);
}

// ── closing line - warm, settled, hands decision back ─────────

const CLOSING_LINES = [
  "Sleep on it - you can decide tomorrow.",
  "You get to decide if you want to continue with them.",
  "How you want to move forward is completely up to you.",
  "There's no rush. You'll know when you know.",
  "Take your time with this one.",
];

function buildClosingLine(seed: number): string {
  return CLOSING_LINES[(seed >> 16) % CLOSING_LINES.length];
}

// ── personalized ponderings ───────────────────────────────────

function buildPonderings(s: State): string[] {
  const questions: string[] = [];
  const dedup = dedupeFields(s);

  if (dedup.merged) {
    const t = mirrorToYou(dedup.anchor);
    const tCap = t[0].toUpperCase() + t.slice(1);
    questions.push(
      `'${tCap}' is clearly still on your mind — what do you think it meant?`
    );
  } else {
    if (isFilled(s.sticking)) {
      const t = mirrorToYou(s.sticking.trim());
      const tCap = t[0].toUpperCase() + t.slice(1);
      questions.push(
        `What does '${tCap}' say about what matters to you?`
      );
    }

    if (isFilled(s.surprise)) {
      if (isPredominantlyNegative(s) && hasSensory(s.surprise)) {
        questions.push(
          "Sometimes a physical reaction tells you something important. It's worth paying attention to."
        );
      } else if (isGeneralObservation(s.surprise)) {
        const t = mirrorToYou(s.surprise.trim());
        const tCap = t[0].toUpperCase() + t.slice(1);
        questions.push(
          `You didn't expect '${tCap}' — what does that tell you about what you're looking for?`
        );
      } else {
        const t = mirrorToYou(s.surprise.trim());
        const tCap = t[0].toUpperCase() + t.slice(1);
        questions.push(
          `'${tCap}' surprised you - would you want to explore that directly, or wait and see?`
        );
      }
    }

    if (isFilled(s.curious)) {
      const t = mirrorToYou(s.curious.trim());
      const tCap = t[0].toUpperCase() + t.slice(1);
      if (isPredominantlyNegative(s)) {
        questions.push(
          `Is '${tCap}' something worth getting clarity on, even without another date?`
        );
      } else {
        questions.push(
          `If you met again, how might '${tCap}' come up naturally?`
        );
      }
    }
  }

  const filledCount = dedup.merged
    ? 1
    : [s.sticking, s.surprise, s.curious].filter(isFilled).length;

  const generics = [
    "Did anything feel different from your usual dates?",
    "Did you notice yourself thinking about them afterward?",
    "Was there a moment where you felt most like yourself?",
    "What would you want to be different if you met again?",
    "Did the conversation go anywhere unexpected?",
  ];

  const genericCount = filledCount >= 2 ? 1 : 2;
  const startIndex = (s.feelings.length + filledCount) % generics.length;

  for (let i = 0; i < genericCount; i++) {
    questions.push(generics[(startIndex + i) % generics.length]);
  }

  return questions;
}

// ── main functions ────────────────────────────────────────────

export function buildSummary(raw: Partial<State> | null | undefined): string {
  const s = normalizeState(raw);
  const seed = makeSeed(s);
  const feelings = s.feelings.slice(0, 2);

  const opening    = buildOpening(feelings, seed);
  const connection = buildConnection(s, seed);
  const closing    = buildClosing(s, seed);

  const textParts: string[] = [];
  const dedup = dedupeFields(s);
  if (dedup.merged) {
    const t = mirrorToYou(dedup.anchor);
    const tCap = t[0].toUpperCase() + t.slice(1);
    textParts.push(seededPick([
      `'${tCap}' is still with you.`,
      `You're still thinking about '${tCap}.'`,
      `Something about '${tCap}' hasn't left you yet.`,
    ], seed, 13));
  } else {
    if (isFilled(s.sticking)) {
      const t = mirrorToYou(s.sticking.trim());
      const tCap = t[0].toUpperCase() + t.slice(1);
      textParts.push(seededPick([
        `'${tCap}' is still with you.`,
        `You're still thinking about '${tCap}.'`,
        `Something about '${tCap}' hasn't left you yet.`,
      ], seed, 13));
    }
    if (isFilled(s.surprise)) {
      const t = mirrorToYou(s.surprise.trim());
      const tCap = t[0].toUpperCase() + t.slice(1);
      if (isGeneralObservation(s.surprise)) {
        textParts.push(seededPick([
          `'${tCap}' wasn't what you were expecting.`,
          `You didn't expect '${tCap}.'`,
        ], seed, 12));
      } else {
        const surpriseLeadIn = seededPick([
          `Something about '${tCap}' caught you off guard.`,
          `'${tCap}' landed in a way you didn't expect.`,
          `The way '${tCap}' showed up wasn't what you expected.`,
        ], seed, 12);
        textParts.push(surpriseLeadIn);
      }
    }
    if (isFilled(s.curious)) {
      const raw = mirrorToYou(s.curious.trim());
      const items = raw.split(/\s*,\s*|\s+and\s+/i).map(x => x.trim()).filter(Boolean);
      const quote = (x: string) => `'${x[0].toUpperCase()}${x.slice(1)}'`;
      if (items.length >= 2) {
        const [first, second] = items;
        textParts.push(`${quote(first)} and ${quote(second)} are still things you're wondering about.`);
      } else {
        textParts.push(`${quote(items[0] || raw)} is still something you're wondering about.`);
      }
    }
  }

  const coreParts = [opening, connection, closing].filter(Boolean) as string[];

  const shapeRoll = (seed >> 12) % 5;
  let core: string;
  if (coreParts.length === 3 && shapeRoll < 2) {
    core = [coreParts[0], shapeRoll === 0 ? coreParts[1] : coreParts[2]].join(" ");
  } else {
    core = coreParts.join(" ");
  }

  const closingLine = buildClosingLine(seed);
  console.log("[buildSummary] buildClosingLine returned:", closingLine);

  const allParts = [core, ...textParts, closingLine].filter(Boolean);
  return allParts.join(" ");
}

export function buildPonderingsList(raw: Partial<State> | null | undefined): string[] {
  const s = normalizeState(raw);
  return buildPonderings(s);
}