Elements

/*
 * MIT License
 *
 * Copyright (c) 2026 OwnlyPlans
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
"use client";
import { useId, useMemo, useState } from "react";

const css = `
.ti{position:relative;width:min(400px,100%);color:#0b1020;font:14px/1.5 system-ui,sans-serif}
.ti-label{display:flex;justify-content:space-between;margin-bottom:6px;font-weight:600}
.ti-label span{color:#5c627c;font-weight:500;font-size:12.5px}
.ti-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:46px;padding:6px 8px;border:1.5px solid #d8deeb;border-radius:12px;background:#fff;cursor:text}
.ti-box:focus-within{border-color:#1659f5;box-shadow:0 0 0 4px rgba(22,89,245,.18)}
.ti-chips{display:contents;list-style:none;margin:0;padding:0}
.ti-chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px 0 10px;border-radius:99px;background:rgba(22,89,245,.12);font-size:13px;font-weight:600}
.ti-chip button{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:none;color:#5c627c;font-size:15px;cursor:pointer}
.ti-chip button:hover,.ti-chip button:focus-visible{background:rgba(11,16,32,.12);color:#0b1020;outline:none}
.ti-box input{flex:1;min-width:110px;height:30px;border:0;background:none;color:inherit;font:inherit;outline:none}
.ti-list{position:absolute;left:0;right:0;z-index:5;margin:6px 0 0;padding:5px;list-style:none;max-height:200px;overflow:auto;border:1px solid #d8deeb;border-radius:12px;background:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
.ti-opt{padding:7px 10px;border-radius:8px;cursor:pointer}
.ti-opt[aria-selected=true]{background:rgba(22,89,245,.12)}
.ti-opt mark{background:none;color:#1659f5;font-weight:700}
.ti-help{margin:6px 0 0;color:#5c627c;font-size:12.5px;min-height:18px}`;

type Opt = { label: string; isNew?: boolean };

export function TagInput({
  label = "Tags",
  suggestions = [],
  value,
  defaultValue = [],
  onChange,
  max = 10,
  allowNew = true,
  placeholder = "Add a tag...",
}: {
  label?: string;
  suggestions?: string[];
  value?: string[];
  defaultValue?: string[];
  onChange?: (tags: string[]) => void;
  max?: number;
  allowNew?: boolean;
  placeholder?: string;
}) {
  const id = useId();
  const [inner, setInner] = useState(defaultValue);
  const tags = value ?? inner;
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);
  const [help, setHelp] = useState("Press Enter or comma to add. Backspace removes the last one.");
  const has = (t: string) => tags.some((x) => x.toLowerCase() === t.toLowerCase());
  const full = tags.length >= max;

  const set = (next: string[]) => { if (value === undefined) setInner(next); onChange?.(next); };

  const opts: Opt[] = useMemo(() => {
    const q = query.trim();
    if (!q || full) return [];
    const list: Opt[] = suggestions.filter((s) => s.toLowerCase().includes(q.toLowerCase()) && !has(s)).slice(0, 6).map((label) => ({ label }));
    if (allowNew && !has(q) && !suggestions.some((s) => s.toLowerCase() === q.toLowerCase())) list.push({ label: q, isNew: true });
    return list;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [query, suggestions, tags, full, allowNew]);
  const shown = open && opts.length > 0;
  const current = Math.min(active, Math.max(opts.length - 1, 0));

  const add = (raw: string) => {
    const t = raw.trim().replace(/,+$/, "").slice(0, 30);
    if (!t) return;
    if (full) return setHelp(`You can add up to ${max}.`);
    if (has(t)) { setHelp(`${t} is already added.`); setQuery(""); return; }
    if (!allowNew && !suggestions.some((s) => s.toLowerCase() === t.toLowerCase())) return setHelp("Pick one of the suggestions.");
    set([...tags, t]); setQuery(""); setActive(0); setHelp(`${t} added.`);
  };
  const remove = (i: number) => { setHelp(`${tags[i]} removed.`); set(tags.filter((_, k) => k !== i)); };

  return (
    <div className="ti">
      <style>{css}</style>
      <label className="ti-label" htmlFor={id}>{label} <span>{tags.length}/{max}</span></label>
      <div className="ti-box">
        <ul className="ti-chips" aria-label={`Selected ${label.toLowerCase()}`}>
          {tags.map((t, i) => (
            <li className="ti-chip" key={t}>{t}<button type="button" aria-label={`Remove ${t}`} onClick={() => remove(i)}>×</button></li>
          ))}
        </ul>
        <input
          id={id} value={query} placeholder={full ? "" : placeholder} autoComplete="off"
          role="combobox" aria-expanded={shown} aria-controls={`${id}-list`} aria-autocomplete="list"
          aria-activedescendant={shown ? `${id}-o${current}` : undefined}
          onFocus={() => setOpen(true)} onBlur={() => setOpen(false)}
          onChange={(e) => {
            const v = e.target.value;
            if (v.includes(",")) { const parts = v.split(","); parts.slice(0, -1).forEach(add); setQuery(parts[parts.length - 1]); }
            else setQuery(v);
            setActive(0); setOpen(true);
          }}
          onKeyDown={(e) => {
            if (e.key === "ArrowDown" && shown) { e.preventDefault(); setActive((current + 1) % opts.length); }
            else if (e.key === "ArrowUp" && shown) { e.preventDefault(); setActive((current - 1 + opts.length) % opts.length); }
            else if (e.key === "Enter") { e.preventDefault(); add(shown ? opts[current].label : query); }
            else if (e.key === "Escape") setOpen(false);
            else if (e.key === "Backspace" && !query && tags.length) remove(tags.length - 1);
          }}
        />
      </div>
      {shown && (
        <ul className="ti-list" id={`${id}-list`} role="listbox" aria-label="Suggestions">
          {opts.map((o, i) => (
            <li key={o.label + i} id={`${id}-o${i}`} role="option" aria-selected={i === current} className="ti-opt"
              onMouseDown={(e) => { e.preventDefault(); add(o.label); }} onMouseMove={() => setActive(i)}>
              {o.isNew ? `Add “${o.label}”` : o.label}
            </li>
          ))}
        </ul>
      )}
      <p className="ti-help" aria-live="polite">{help}</p>
    </div>
  );
}

/* Usage:
   <TagInput label="Skills" max={6} suggestions={["React", "Python", "SQL"]} defaultValue={["React"]} onChange={setSkills} />
*/

/*
 * MIT License
 *
 * Copyright (c) 2026 OwnlyPlans
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
"use client";
import { useId, useMemo, useState } from "react";

export type Rule = { id: string; label: string; test: (p: string) => boolean };

const COMMON = ["password", "123456", "qwerty", "letmein", "welcome", "iloveyou", "admin", "monkey", "dragon", "football", "abc123", "sunshine", "princess", "passw0rd"];
const defaultRules = (min: number): Rule[] => [
  { id: "len", label: `At least ${min} characters`, test: (p) => p.length >= min },
  { id: "case", label: "Upper and lower case letters", test: (p) => /[a-z]/.test(p) && /[A-Z]/.test(p) },
  { id: "num", label: "A number", test: (p) => /\d/.test(p) },
  { id: "sym", label: "A symbol, like ! ? # or @", test: (p) => /[^A-Za-z0-9]/.test(p) },
];
const WORDS = ["", "Too weak", "Fair", "Good", "Strong"];
const COLORS = ["", "#d93838", "#e5a50a", "#3a8dde", "#18a978"];

/** 0 (empty) to 4 (strong). A guide only: decide what you accept on the server. */
export function passwordScore(p: string, rules: Rule[], min: number) {
  if (!p) return 0;
  const met = rules.filter((r) => r.test(p)).length;
  const low = p.toLowerCase().replace(/[^a-z0-9]/g, "");
  if (COMMON.some((c) => low.includes(c)) || /(.)\1{3,}/.test(p)) return 1;
  let s = met <= 1 ? 1 : met === 2 ? 2 : met === 3 ? 3 : 4;
  if (p.length < min) s = Math.min(s, 2);
  if (p.length >= 16 && met >= 2) s = Math.max(s, 3);
  return s;
}

const css = `
.pw{width:min(360px,100%);color:#0b1020;font:14px/1.5 system-ui,sans-serif}
.pw-label{display:block;margin-bottom:6px;font-weight:600}
.pw-field{display:flex;align-items:center;border:1.5px solid #d8deeb;border-radius:12px;background:#fff}
.pw-field:focus-within{border-color:#1659f5;box-shadow:0 0 0 4px rgba(22,89,245,.18)}
.pw-field input{flex:1;min-width:0;height:44px;padding:0 14px;border:0;background:none;color:inherit;font:inherit;font-size:15px;outline:none}
.pw-eye{display:grid;place-items:center;width:40px;height:40px;margin-right:2px;border:0;border-radius:9px;background:none;color:#5c627c;cursor:pointer}
.pw-eye:hover,.pw-eye:focus-visible{color:#0b1020;background:rgba(11,16,32,.07);outline:none}
.pw-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:10px}
.pw-meter i{height:5px;border-radius:99px;background:#e3e7f0;transition:background .25s}
.pw-word{margin:6px 0 8px;min-height:18px;color:#5c627c;font-size:12.5px;font-weight:600}
.pw-rules{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:#5c627c}
.pw-rules li{display:flex;align-items:center;gap:8px}
.pw-dot{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid #d8deeb;display:grid;place-items:center}
.pw-rules li.ok{color:#0b1020}.pw-rules li.ok .pw-dot{border:0;background:#18a978}`;

export function PasswordStrengthField({
  label = "Create a password",
  minLength = 10,
  rules,
  name = "password",
  onChange,
}: {
  label?: string;
  minLength?: number;
  rules?: Rule[];
  name?: string;
  onChange?: (value: string, score: number) => void;
}) {
  const id = useId();
  const [value, setValue] = useState("");
  const [show, setShow] = useState(false);
  const list = useMemo(() => rules ?? defaultRules(minLength), [rules, minLength]);
  const s = passwordScore(value, list, minLength);
  const low = value.toLowerCase().replace(/[^a-z0-9]/g, "");
  const hint = !value ? `Use at least ${minLength} characters`
    : COMMON.some((c) => low.includes(c)) ? "Too weak: this is a very common password"
    : /(.)\1{3,}/.test(value) ? "Too weak: avoid repeated characters"
    : `Strength: ${WORDS[s]}`;

  return (
    <div className="pw">
      <style>{css}</style>
      <label className="pw-label" htmlFor={id}>{label}</label>
      <div className="pw-field">
        <input id={id} name={name} type={show ? "text" : "password"} autoComplete="new-password" spellCheck={false}
          aria-describedby={`${id}-word ${id}-rules`} value={value}
          onChange={(e) => { setValue(e.target.value); onChange?.(e.target.value, passwordScore(e.target.value, list, minLength)); }} />
        <button type="button" className="pw-eye" aria-pressed={show} aria-label={show ? "Hide password" : "Show password"} onClick={() => setShow((v) => !v)}>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" />{!show && <path d="M4 4l16 16" />}</svg>
        </button>
      </div>
      <div className="pw-meter" aria-hidden="true">
        {[1, 2, 3, 4].map((n) => <i key={n} style={{ background: s >= n ? COLORS[s] : undefined }} />)}
      </div>
      <p className="pw-word" id={`${id}-word`} aria-live="polite" style={{ color: s === 1 ? COLORS[1] : s === 4 ? "#13915f" : undefined }}>{hint}</p>
      <ul className="pw-rules" id={`${id}-rules`}>
        {list.map((r) => {
          const ok = r.test(value);
          return (
            <li key={r.id} className={ok ? "ok" : undefined}>
              <span className="pw-dot" aria-hidden="true">{ok && <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 12.5l4 4 8-9" /></svg>}</span>
              {r.label}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

/* Usage:
   <PasswordStrengthField minLength={12} onChange={(value, score) => setCanSubmit(score >= 3)} />
*/

/*
 * MIT License
 *
 * Copyright (c) 2026 OwnlyPlans
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
"use client";
import { useEffect, useRef, useState } from "react";

const css = `
.otp{width:min(380px,100%);padding:22px;border:1px solid #d8deeb;border-radius:16px;background:#fff;text-align:center;color:#0b1020;font:14px/1.5 system-ui,sans-serif}
.otp-boxes{display:flex;justify-content:center;gap:8px}
.otp-boxes input{width:44px;height:52px;padding:0;border:1.5px solid #d8deeb;border-radius:12px;background:transparent;color:inherit;font:600 22px/1 ui-monospace,monospace;text-align:center;caret-color:#1659f5}
.otp-boxes input:focus{outline:none;border-color:#1659f5;box-shadow:0 0 0 4px rgba(22,89,245,.2)}
.otp-boxes input:nth-child(3){margin-right:10px}
.otp.is-bad input{border-color:#d93838}.otp.is-bad .otp-boxes{animation:otp-shake .4s}
.otp.is-ok input{border-color:#18a978;background:rgba(24,169,120,.1)}
@keyframes otp-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.otp.is-bad .otp-boxes{animation:none}}
.otp-msg{min-height:20px;margin:10px 0 0;font-size:13px;font-weight:600}
.otp.is-bad .otp-msg{color:#d93838}.otp.is-ok .otp-msg{color:#13915f}
.otp-resend{margin:6px 0 0;color:#5c627c;font-size:13px}
.otp-resend button{padding:0;border:0;background:none;color:#1659f5;font:inherit;font-weight:600;cursor:pointer}
.otp-resend button:disabled{color:#5c627c;cursor:default}`;

export function VerificationCodeInput({
  length = 6,
  verify,
  onVerified,
  onResend,
  resendAfter = 30,
}: {
  length?: number;
  /** Check the code with your API. Resolve true when it is right. */
  verify: (code: string) => Promise<boolean>;
  onVerified?: (code: string) => void;
  onResend?: () => void;
  resendAfter?: number;
}) {
  const [digits, setDigits] = useState<string[]>(() => Array(length).fill(""));
  const [state, setState] = useState<"idle" | "checking" | "ok" | "bad">("idle");
  const [msg, setMsg] = useState("");
  const [left, setLeft] = useState(resendAfter);
  const refs = useRef<(HTMLInputElement | null)[]>([]);

  useEffect(() => {
    if (left <= 0) return;
    const t = setTimeout(() => setLeft((s) => s - 1), 1000);
    return () => clearTimeout(t);
  }, [left]);

  const focus = (i: number) => refs.current[Math.max(0, Math.min(length - 1, i))]?.focus();

  const update = (next: string[]) => {
    setDigits(next);
    if (state === "bad") { setState("idle"); setMsg(""); }
    const code = next.join("");
    if (code.length === length && next.every(Boolean)) {
      setState("checking"); setMsg("Checking…");
      verify(code)
        .then((ok) => {
          if (ok) { setState("ok"); setMsg("Verified."); onVerified?.(code); }
          else { setState("bad"); setMsg("That code is not right. Try again."); setDigits(Array(length).fill("")); focus(0); }
        })
        .catch(() => { setState("bad"); setMsg("Could not check the code. Try again."); });
    }
  };

  const fillFrom = (i: number, text: string) => {
    const d = text.replace(/\D/g, "").slice(0, length - i);
    if (!d) return;
    const next = [...digits];
    d.split("").forEach((c, k) => (next[i + k] = c));
    update(next);
    focus(i + d.length);
  };

  return (
    <div className={`otp${state === "bad" ? " is-bad" : state === "ok" ? " is-ok" : ""}`}>
      <style>{css}</style>
      <div className="otp-boxes" role="group" aria-label="Verification code">
        {digits.map((v, i) => (
          <input
            key={i}
            ref={(el) => { refs.current[i] = el; }}
            value={v}
            inputMode="numeric"
            autoComplete={i === 0 ? "one-time-code" : "off"}
            maxLength={length}
            aria-label={`Digit ${i + 1} of ${length}`}
            disabled={state === "checking"}
            readOnly={state === "ok"}
            onFocus={(e) => e.target.select()}
            onChange={(e) => {
              const d = e.target.value.replace(/\D/g, "");
              if (d.length > 1) return fillFrom(i, d);
              const next = [...digits]; next[i] = d; update(next);
              if (d) focus(i + 1);
            }}
            onKeyDown={(e) => {
              if (e.key === "Backspace" && !digits[i] && i > 0) { e.preventDefault(); const next = [...digits]; next[i - 1] = ""; update(next); focus(i - 1); }
              else if (e.key === "ArrowLeft") { e.preventDefault(); focus(i - 1); }
              else if (e.key === "ArrowRight") { e.preventDefault(); focus(i + 1); }
            }}
            onPaste={(e) => { e.preventDefault(); fillFrom(i, e.clipboardData.getData("text")); }}
          />
        ))}
      </div>
      <p className="otp-msg" role="status" aria-live="polite">{msg}</p>
      <p className="otp-resend">
        Didn't get it?{" "}
        <button type="button" disabled={left > 0} onClick={() => { onResend?.(); setLeft(resendAfter); setMsg("New code sent."); setState("idle"); }}>
          {left > 0 ? `Resend in ${left}s` : "Resend code"}
        </button>
      </p>
    </div>
  );
}

/* Usage:
   <VerificationCodeInput verify={async (code) => (await fetch("/api/verify", { method: "POST", body: JSON.stringify({ code }) })).ok}
     onVerified={() => router.push("/welcome")} onResend={() => fetch("/api/resend", { method: "POST" })} />
*/

/*
 * MIT License
 *
 * Copyright (c) 2026 OwnlyPlans
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
"use client";
import { useMemo, useState, type ReactNode } from "react";

export type Column<T> = {
  key: keyof T & string;
  label: string;
  numeric?: boolean;
  /** Custom cell. Sorting still uses the raw value. */
  render?: (row: T) => ReactNode;
};

const css = `
.dt{width:100%;background:#fff;border:1px solid #d8deeb;border-radius:14px;overflow:hidden;font:13px/1.5 system-ui,sans-serif;color:#0b1020}
.dt-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #d8deeb}
.dt-search{flex:1;display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #d8deeb;border-radius:9px}
.dt-search:focus-within{border-color:#1659f5;box-shadow:0 0 0 3px rgba(22,89,245,.2)}
.dt-search input{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;outline:none}
.dt-count{color:#5c627c;font-size:12px;white-space:nowrap}
.dt-scroll{overflow-x:auto}
.dt table{width:100%;border-collapse:collapse;min-width:440px}
.dt th,.dt td{padding:8px 12px;text-align:left;white-space:nowrap}
.dt th{padding:0;border-bottom:1px solid #d8deeb;font-size:11.5px;font-weight:600;color:#5c627c}
.dt th button{display:flex;align-items:center;gap:4px;width:100%;padding:8px 12px;border:0;background:none;color:inherit;font:inherit;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.dt th button:hover,.dt th button:focus-visible{color:#0b1020;outline:none}
.dt th button:focus-visible{box-shadow:inset 0 0 0 2px #1659f5}
.dt th[aria-sort] button{color:#0b1020}
.dt .arw{opacity:.35;font-size:10px}.dt th[aria-sort] .arw{opacity:1;color:#1659f5}
.dt .num{text-align:right}.dt th.num button{justify-content:flex-end}
.dt td{border-bottom:1px solid #eef1f7}
.dt tbody tr:hover{background:rgba(22,89,245,.05)}
.dt-empty td{padding:26px;text-align:center;color:#5c627c}
.dt-pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:8px 12px;color:#5c627c;font-size:12px}
.dt-pager button{width:28px;height:28px;border:1px solid #d8deeb;border-radius:8px;background:none;font-size:16px;cursor:pointer}
.dt-pager button:disabled{opacity:.35;cursor:default}`;

export function DataTable<T extends Record<string, unknown>>({
  rows,
  columns,
  pageSize = 10,
  initialSort,
  searchLabel = "Search",
}: {
  rows: T[];
  columns: Column<T>[];
  pageSize?: number;
  initialSort?: { key: keyof T & string; dir: 1 | -1 };
  searchLabel?: string;
}) {
  const [sort, setSort] = useState(initialSort ?? { key: columns[0].key, dir: 1 as 1 | -1 });
  const [query, setQuery] = useState("");
  const [page, setPage] = useState(0);

  const list = useMemo(() => {
    const s = query.trim().toLowerCase();
    return rows
      .filter((r) => !s || Object.values(r).some((v) => String(v ?? "").toLowerCase().includes(s)))
      .sort((a, b) => {
        const x = a[sort.key], y = b[sort.key];
        const c = typeof x === "number" && typeof y === "number" ? x - y : String(x ?? "").localeCompare(String(y ?? ""), undefined, { numeric: true });
        return c * sort.dir;
      });
  }, [rows, query, sort]);

  const pages = Math.max(1, Math.ceil(list.length / pageSize));
  const current = Math.min(page, pages - 1);
  const from = current * pageSize;
  const shown = list.slice(from, from + pageSize);

  const toggle = (c: Column<T>) => {
    setSort((s) => (s.key === c.key ? { key: c.key, dir: (s.dir * -1) as 1 | -1 } : { key: c.key, dir: c.numeric ? -1 : 1 }));
    setPage(0);
  };

  return (
    <div className="dt">
      <style>{css}</style>
      <div className="dt-bar">
        <label className="dt-search">
          <input type="search" placeholder={searchLabel} aria-label={searchLabel} value={query} onChange={(e) => { setQuery(e.target.value); setPage(0); }} />
        </label>
        <span className="dt-count" aria-live="polite">{list.length} of {rows.length}</span>
      </div>
      <div className="dt-scroll">
        <table>
          <thead>
            <tr>
              {columns.map((c) => {
                const on = sort.key === c.key;
                return (
                  <th key={c.key} className={c.numeric ? "num" : undefined} aria-sort={on ? (sort.dir > 0 ? "ascending" : "descending") : undefined}>
                    <button type="button" onClick={() => toggle(c)}>
                      {c.label}<span className="arw" aria-hidden="true">{on ? (sort.dir > 0 ? "▲" : "▼") : "↕"}</span>
                    </button>
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>
            {shown.length ? shown.map((r, i) => (
              <tr key={from + i}>
                {columns.map((c) => <td key={c.key} className={c.numeric ? "num" : undefined}>{c.render ? c.render(r) : String(r[c.key] ?? "")}</td>)}
              </tr>
            )) : (
              <tr className="dt-empty"><td colSpan={columns.length}>No rows match “{query.trim()}”</td></tr>
            )}
          </tbody>
        </table>
      </div>
      <div className="dt-pager">
        <button type="button" aria-label="Previous page" disabled={current === 0} onClick={() => setPage(current - 1)}>‹</button>
        <span>{list.length ? `${from + 1}–${from + shown.length} of ${list.length}` : "0 of 0"}</span>
        <button type="button" aria-label="Next page" disabled={current >= pages - 1} onClick={() => setPage(current + 1)}>›</button>
      </div>
    </div>
  );
}

/* Usage:
   <DataTable rows={customers} pageSize={8} initialSort={{ key: "mrr", dir: -1 }}
     columns={[{ key: "name", label: "Customer" }, { key: "mrr", label: "MRR", numeric: true, render: (r) => `$${r.mrr}` }]} />
*/

/*
 * MIT License
 *
 * Copyright (c) 2026 OwnlyPlans
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
"use client";
import { useCallback, useId, useRef, useState } from "react";

/** Upload one file. Call onProgress with 0-100; resolve when done, reject on failure. */
export type Uploader = (file: File, onProgress: (pct: number) => void) => Promise<void>;

/** Default uploader: POSTs each file as multipart form data to `url`, with real progress. */
export const xhrUploader = (url: string, field = "file"): Uploader => (file, onProgress) =>
  new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", url);
    xhr.upload.onprogress = (e) => e.lengthComputable && onProgress((e.loaded / e.total) * 100);
    xhr.onload = () => (xhr.status < 300 ? resolve() : reject(new Error(`Upload failed (${xhr.status})`)));
    xhr.onerror = () => reject(new Error("Network error"));
    const body = new FormData();
    body.append(field, file);
    xhr.send(body);
  });

type Row = { id: number; file: File; pct: number; state: "uploading" | "done" | "error"; note: string };

const css = `
.dz-wrap{width:min(420px,100%);font:14px/1.5 system-ui,sans-serif;color:#0b1020}
.dz{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;border:2px dashed #d8deeb;border-radius:16px;background:#fff;text-align:center;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.dz:hover,.dz:focus-visible{border-color:#1659f5;outline:none}
.dz:focus-visible{box-shadow:0 0 0 4px rgba(22,89,245,.22)}
.dz.is-over{border-color:#1659f5;background:rgba(22,89,245,.06);transform:scale(1.01)}
.dz input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dz svg{width:30px;height:30px;fill:none;stroke:#1659f5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dz-title{font-weight:600}.dz-title u{color:#1659f5;text-underline-offset:3px}
.dz-rules{color:#5c627c;font-size:12.5px}
.dz-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.dz-file{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:9px 12px;border:1px solid #d8deeb;border-radius:12px;background:#fff}
.dz-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.dz-meta{grid-column:1;color:#5c627c;font-size:12px}
.is-error .dz-meta{color:#d93838}.is-done .dz-meta{color:#13915f}
.dz-bar{grid-column:1/-1;height:5px;border-radius:99px;background:#e6eaf3;overflow:hidden}
.dz-bar i{display:block;height:100%;border-radius:inherit;background:#1659f5;transition:width .2s}
.is-done .dz-bar i{background:#18a978}
.dz-x{grid-row:1/3;grid-column:2;width:28px;height:28px;border:0;border-radius:8px;background:none;color:#5c627c;font-size:18px;cursor:pointer}
.dz-x:hover,.dz-x:focus-visible{background:rgba(11,16,32,.08);color:#0b1020;outline:none}
.dz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}`;

const fmt = (b: number) => (b < 1024 ? `${b} B` : b < 1048576 ? `${(b / 1024).toFixed(0)} KB` : `${(b / 1048576).toFixed(1)} MB`);

export function FileDropZone({
  upload,
  accept = "image/*,application/pdf",
  maxBytes = 5 * 1024 * 1024,
  rules = "Images or PDF, up to 5 MB each",
  onUploaded,
}: {
  upload: Uploader;
  accept?: string;
  maxBytes?: number;
  rules?: string;
  onUploaded?: (file: File) => void;
}) {
  const [rows, setRows] = useState<Row[]>([]);
  const [over, setOver] = useState(false);
  const [status, setStatus] = useState("");
  const input = useRef<HTMLInputElement>(null);
  const nextId = useRef(0);
  const rulesId = useId();

  const allowed = useCallback(
    (f: File) =>
      accept.split(",").map((a) => a.trim()).some((a) =>
        a.endsWith("/*") ? f.type.startsWith(a.slice(0, -1)) : a.startsWith(".") ? f.name.toLowerCase().endsWith(a.toLowerCase()) : f.type === a,
      ),
    [accept],
  );

  const patch = (id: number, p: Partial<Row>) => setRows((rs) => rs.map((r) => (r.id === id ? { ...r, ...p } : r)));

  const add = (files: FileList | File[]) => {
    let ok = 0, bad = 0;
    const fresh: Row[] = [...files].map((file) => {
      const id = nextId.current++;
      const note = !allowed(file) ? "File type not allowed" : file.size > maxBytes ? `Too large (${fmt(file.size)})` : "";
      if (note) { bad++; return { id, file, pct: 0, state: "error", note }; }
      ok++;
      upload(file, (pct) => patch(id, { pct }))
        .then(() => { patch(id, { pct: 100, state: "done", note: "uploaded" }); setStatus(`${file.name} uploaded`); onUploaded?.(file); })
        .catch((e: Error) => { patch(id, { state: "error", note: e.message }); setStatus(`${file.name} failed`); });
      return { id, file, pct: 0, state: "uploading", note: "uploading…" };
    });
    setRows((rs) => [...fresh, ...rs]);
    setStatus(`${ok ? `${ok} file${ok > 1 ? "s" : ""} uploading. ` : ""}${bad ? `${bad} refused.` : ""}`);
  };

  return (
    <div className="dz-wrap">
      <style>{css}</style>
      <label
        className={`dz${over ? " is-over" : ""}`}
        tabIndex={0}
        aria-describedby={rulesId}
        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); input.current?.click(); } }}
        onDragEnter={(e) => { e.preventDefault(); setOver(true); }}
        onDragOver={(e) => { e.preventDefault(); setOver(true); }}
        onDragLeave={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node)) setOver(false); }}
        onDrop={(e) => { e.preventDefault(); setOver(false); if (e.dataTransfer.files.length) add(e.dataTransfer.files); }}
      >
        <input ref={input} type="file" multiple accept={accept} onChange={(e) => { if (e.target.files) add(e.target.files); e.target.value = ""; }} />
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V4m0 0-4.5 4.5M12 4l4.5 4.5" /><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" /></svg>
        <span className="dz-title">Drop files here or <u>browse</u></span>
        <span className="dz-rules" id={rulesId}>{rules}</span>
      </label>
      <ul className="dz-list" aria-label="Files">
        {rows.map((r) => (
          <li key={r.id} className={`dz-file${r.state === "error" ? " is-error" : r.state === "done" ? " is-done" : ""}`}>
            <span className="dz-name" title={r.file.name}>{r.file.name}</span>
            <button className="dz-x" type="button" aria-label={`Remove ${r.file.name}`}
              onClick={() => { setRows((rs) => rs.filter((x) => x.id !== r.id)); setStatus(`${r.file.name} removed`); }}>×</button>
            <span className="dz-meta">{r.state === "error" ? r.note : `${fmt(r.file.size)} · ${r.note}`}</span>
            {r.state !== "error" && (
              <span className="dz-bar" role="progressbar" aria-label="Upload progress" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(r.pct)}>
                <i style={{ width: `${r.pct}%` }} />
              </span>
            )}
          </li>
        ))}
      </ul>
      <p className="dz-sr" aria-live="polite">{status}</p>
    </div>
  );
}

/* Usage:
   <FileDropZone upload={xhrUploader("/api/upload")} onUploaded={(f) => console.log("done", f.name)} />
*/

"use client";
import { useEffect, useMemo, useRef, useState } from "react";

export type Command = { group: string; label: string; shortcut?: string; run: () => void };

const css = `
.cm{width:min(420px,100%);background:#fff;border:1px solid #d8deeb;border-radius:14px;box-shadow:0 18px 50px -20px rgba(0,0,0,.35);overflow:hidden;font:14px/1.5 system-ui,sans-serif;color:#0b1020}
.cm-search{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #d8deeb}
.cm-search input{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;outline:none}
.cm-kbd{font:600 11px/1 ui-monospace,monospace;color:#5c627c;border:1px solid #d8deeb;border-radius:6px;padding:4px 6px}
.cm-list{list-style:none;margin:0;padding:6px;max-height:280px;overflow:auto}
.cm-group{padding:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#5c627c}
.cm-item{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:9px;cursor:pointer}
.cm-item[aria-selected=true]{background:rgba(22,89,245,.12)}
.cm-item mark{background:none;color:#1659f5;font-weight:700}
.cm-hint{color:#5c627c;font-size:12px}
.cm-empty{padding:22px;text-align:center;color:#5c627c}`;

function Highlight({ text, query }: { text: string; query: string }) {
  const i = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1;
  if (i < 0) return <>{text}</>;
  return <>{text.slice(0, i)}<mark>{text.slice(i, i + query.length)}</mark>{text.slice(i + query.length)}</>;
}

export function CommandMenu({ commands, placeholder = "Type a command or search..." }: { commands: Command[]; placeholder?: string }) {
  const [query, setQuery] = useState("");
  const [active, setActive] = useState(0);
  const listRef = useRef<HTMLUListElement>(null);
  const shown = useMemo(() => commands.filter((c) => c.label.toLowerCase().includes(query.trim().toLowerCase())), [commands, query]);

  useEffect(() => setActive(0), [query]);
  useEffect(() => {
    listRef.current?.querySelector(`[data-n="${active}"]`)?.scrollIntoView({ block: "nearest" });
  }, [active]);

  const run = (n: number) => { shown[n]?.run(); setQuery(""); };
  const onKey = (e: React.KeyboardEvent) => {
    const len = Math.max(shown.length, 1);
    if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => (a + 1) % len); }
    else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => (a - 1 + len) % len); }
    else if (e.key === "Enter") run(active);
    else if (e.key === "Escape") setQuery("");
  };

  let group = "";
  return (
    <div className="cm" role="dialog" aria-label="Command menu">
      <style>{css}</style>
      <div className="cm-search">
        <input autoFocus value={query} onChange={(e) => setQuery(e.target.value)} onKeyDown={onKey} placeholder={placeholder}
          role="combobox" aria-expanded="true" aria-controls="cm-list" aria-activedescendant={`cm-${active}`} />
        <kbd className="cm-kbd">Esc</kbd>
      </div>
      <ul id="cm-list" className="cm-list" role="listbox" ref={listRef}>
        {!shown.length && <li className="cm-empty">No results for "{query}"</li>}
        {shown.map((c, n) => {
          const head = c.group !== group ? (group = c.group) : null;
          return (
            <li key={c.group + c.label} role="presentation">
              {head && <div className="cm-group">{head}</div>}
              <div id={`cm-${n}`} data-n={n} role="option" aria-selected={n === active} className="cm-item"
                onMouseMove={() => setActive(n)} onClick={() => run(n)}>
                <span><Highlight text={c.label} query={query.trim()} /></span>
                {c.shortcut && <span className="cm-hint">{c.shortcut}</span>}
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

"use client";
import { useEffect, useRef, useState } from "react";

type Period = "monthly" | "yearly";
const css = `
.pt{display:grid;gap:16px;justify-items:center;width:min(340px,100%);font-family:system-ui,sans-serif;color:#0b1020}
.pt-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:#eef1f7;border:1px solid #d8deeb;width:100%}
.pt-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pt-switch[data-p=yearly] .pt-thumb{transform:translateX(100%)}
.pt-switch button{position:relative;border:0;background:none;padding:9px 10px;font:600 13px/1.2 system-ui,sans-serif;color:#5c627c;cursor:pointer;border-radius:999px}
.pt-switch button[aria-checked=true]{color:#0b1020}
.pt-switch button:focus-visible{outline:2px solid #1659f5;outline-offset:2px}
.pt-switch em{font-style:normal;font-size:10px;font-weight:700;color:#1659f5;margin-left:4px}
@media (prefers-reduced-motion:reduce){.pt-thumb{transition:none}}`;

function useCountTo(value: number) {
  const [shown, setShown] = useState(value);
  const from = useRef(value);
  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setShown(value); from.current = value; return; }
    const start = from.current, t0 = performance.now();
    let raf = 0;
    const step = (t: number) => {
      const k = Math.min((t - t0) / 450, 1);
      const v = Math.round(start + (value - start) * (1 - Math.pow(1 - k, 3)));
      setShown(v);
      if (k < 1) raf = requestAnimationFrame(step); else from.current = value;
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [value]);
  return shown;
}

export function PricingPeriodToggle({ monthly = 12, yearly = 120, badge = "2 months free", onChange }:
  { monthly?: number; yearly?: number; badge?: string; onChange?: (p: Period) => void }) {
  const [period, setPeriod] = useState<Period>("monthly");
  const price = useCountTo(period === "monthly" ? monthly : yearly);
  const pick = (p: Period) => { setPeriod(p); onChange?.(p); };
  const onKey = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowLeft" || e.key === "ArrowRight") { e.preventDefault(); pick(period === "monthly" ? "yearly" : "monthly"); }
  };
  return (
    <div className="pt">
      <style>{css}</style>
      <div className="pt-switch" role="radiogroup" aria-label="Billing period" data-p={period} onKeyDown={onKey}>
        <span className="pt-thumb" aria-hidden="true" />
        <button type="button" role="radio" aria-checked={period === "monthly"} onClick={() => pick("monthly")}>Monthly</button>
        <button type="button" role="radio" aria-checked={period === "yearly"} onClick={() => pick("yearly")}>Yearly <em>{badge}</em></button>
      </div>
      <p style={{ margin: 0, font: "700 40px/1.1 system-ui", letterSpacing: "-.02em" }}>
        ${price}<small style={{ fontSize: 14, fontWeight: 500, color: "#5c627c", marginLeft: 6 }}>/ {period === "monthly" ? "month" : "year"}</small>
      </p>
    </div>
  );
}

"use client";
import { createContext, useCallback, useContext, useState, type ReactNode } from "react";

type Kind = "success" | "info" | "error";
type Toast = { id: number; text: string; kind: Kind; ms: number; leaving?: boolean };
const Ctx = createContext<(text: string, kind?: Kind, ms?: number) => void>(() => {});
export const useToasts = () => useContext(Ctx);

const css = `
.ts{position:fixed;right:16px;bottom:16px;left:16px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px;pointer-events:none;z-index:50;font:13px/1.45 system-ui,sans-serif}
.ts li{pointer-events:auto;position:relative;overflow:hidden;width:min(320px,100%);display:flex;gap:10px;align-items:flex-start;padding:12px 12px 14px;border-radius:12px;background:#0b1020;color:#fff;box-shadow:0 12px 30px -12px rgba(0,0,0,.45);animation:ts-in .35s cubic-bezier(.2,.8,.2,1)}
.ts li.out{animation:ts-out .25s ease forwards}
.ts i{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 system-ui;font-style:normal}
.ts .success i{background:#14a44d}.ts .info i{background:#1659f5}.ts .error i{background:#d93025}
.ts p{margin:0;flex:1}
.ts button{border:0;background:none;color:inherit;opacity:.6;cursor:pointer;font-size:16px;line-height:1}
.ts-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:currentColor;opacity:.35;transform-origin:left;animation:ts-bar linear forwards}
.ts li:hover .ts-bar{animation-play-state:paused}
@keyframes ts-in{from{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes ts-out{to{opacity:0;transform:translateX(24px)}}
@keyframes ts-bar{to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.ts li,.ts li.out{animation:none}}`;
const ICON: Record<Kind, string> = { success: "✓", info: "i", error: "!" };
let next = 1;

export function Toaster({ children, max = 4 }: { children: ReactNode; max?: number }) {
  const [toasts, setToasts] = useState<Toast[]>([]);
  const close = useCallback((id: number) => {
    setToasts((t) => t.map((x) => (x.id === id ? { ...x, leaving: true } : x)));
    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 250);
  }, []);
  const toast = useCallback((text: string, kind: Kind = "info", ms = 4000) => {
    setToasts((t) => [...t, { id: next++, text, kind, ms }].slice(-max));
  }, [max]);
  return (
    <Ctx.Provider value={toast}>
      {children}
      <style>{css}</style>
      <ol className="ts" aria-live="polite" aria-label="Notifications">
        {toasts.map((t) => (
          <li key={t.id} className={`${t.kind}${t.leaving ? " out" : ""}`}>
            <i aria-hidden="true">{ICON[t.kind]}</i>
            <p>{t.text}</p>
            <button type="button" aria-label="Dismiss" onClick={() => close(t.id)}>×</button>
            <span className="ts-bar" style={{ animationDuration: `${t.ms}ms` }} onAnimationEnd={() => close(t.id)} />
          </li>
        ))}
      </ol>
    </Ctx.Provider>
  );
}

"use client";
import { useEffect, useState } from "react";

const css = `
.ai-bubble{max-width:82%;min-height:38px;padding:9px 13px;border-radius:16px 16px 16px 4px;background:#f1f3f8;border:1px solid #d8deeb;color:#0b1020;font:14px/1.5 system-ui,sans-serif}
.ai-dots{display:inline-flex;gap:4px;padding:6px 0}
.ai-dots b{width:7px;height:7px;border-radius:50%;background:#5c627c;animation:ai-p 1.2s infinite ease-in-out}
.ai-dots b:nth-child(2){animation-delay:.15s}.ai-dots b:nth-child(3){animation-delay:.3s}
.ai-text.on::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:#1659f5;animation:ai-c 1s steps(1) infinite}
@keyframes ai-p{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes ai-c{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ai-dots b,.ai-text.on::after{animation:none}}`;

/**
 * Pass the text received so far in `text` and `done` when the stream ends.
 * While `text` is empty and not done, the typing dots show.
 */
export function AiTypingReply({ text, done }: { text: string; done: boolean }) {
  return (
    <div className="ai-bubble" aria-live="polite" aria-busy={!done}>
      <style>{css}</style>
      {!text && !done ? (
        <span className="ai-dots" aria-label="Assistant is typing"><b /><b /><b /></span>
      ) : (
        <span className={`ai-text${done ? "" : " on"}`}>{text}</span>
      )}
    </div>
  );
}

/** Demo helper: fakes a stream so you can see it working before wiring a real one. */
export function useFakeStream(reply: string, delay = 1300, perWord = 70) {
  const [text, setText] = useState("");
  const [done, setDone] = useState(false);
  useEffect(() => {
    const words = reply.split(" ");
    const timers: ReturnType<typeof setTimeout>[] = [];
    timers.push(setTimeout(() => {
      words.forEach((w, i) => timers.push(setTimeout(() => {
        setText((t) => (t ? t + " " : "") + w);
        if (i === words.length - 1) setDone(true);
      }, i * perWord)));
    }, delay));
    return () => timers.forEach(clearTimeout);
  }, [reply, delay, perWord]);
  return { text, done };
}

"use client";

const css = `
.st-list{position:relative;display:grid;margin:0;padding:0;list-style:none;font:13px/1.4 system-ui,sans-serif}
.st-list::before,.st-list::after{content:"";position:absolute;top:15px;height:2px;background:#d8deeb}
.st-list::after{background:#1659f5;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.st-list li{position:relative;z-index:1;display:grid;justify-items:center;gap:6px;color:#5c627c;text-align:center}
.st-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:#fff;border:2px solid #d8deeb;transition:all .3s}
.st-list li.done .st-dot{background:#1659f5;border-color:#1659f5;color:#fff}
.st-list li[aria-current=step]{color:#0b1020;font-weight:600}
.st-list li[aria-current=step] .st-dot{border-color:#1659f5;color:#1659f5;box-shadow:0 0 0 4px rgba(22,89,245,.18)}
@media (prefers-reduced-motion:reduce){.st-list::after,.st-dot{transition:none}}`;

export function OnboardingStepper({ steps, current }: { steps: string[]; current: number }) {
  const n = steps.length;
  const edge = 50 / n;
  const track = 100 - edge * 2;
  const progress = n > 1 ? current / (n - 1) : 1;
  const dynamic = `.st-list::before,.st-list::after{left:${edge}%}.st-list::before{width:${track}%}.st-list::after{width:${track * progress}%}`;
  return (
    <>
      <style>{css + dynamic}</style>
      <ol className="st-list" style={{ gridTemplateColumns: `repeat(${n}, 1fr)` }}>
        {steps.map((label, i) => {
          const done = i < current || (current === n - 1 && i === current);
          return (
            <li key={label} className={done ? "done" : undefined} aria-current={i === current ? "step" : undefined}>
              <span className="st-dot">{done ? "✓" : i + 1}</span>
              {label}
            </li>
          );
        })}
      </ol>
    </>
  );
}

"use client";
import { useState } from "react";

/** Rough estimate: about 4 characters per token for English text. */
export const estimateTokens = (text: string) => (text.trim() ? Math.ceil(text.trim().length / 4) : 0);

export function PromptTokenMeter({ limit = 4000, onSubmit, countTokens = estimateTokens, placeholder = "Write a prompt..." }:
  { limit?: number; onSubmit: (prompt: string) => void; countTokens?: (t: string) => number; placeholder?: string }) {
  const [value, setValue] = useState("");
  const n = countTokens(value);
  const k = n / limit;
  const level = k > 1 ? "over" : k > 0.8 ? "warn" : "ok";
  const color = level === "over" ? "#d93025" : level === "warn" ? "#e0a100" : "#1659f5";
  const can = n > 0 && k <= 1;
  const send = () => { if (can) { onSubmit(value); setValue(""); } };
  return (
    <form onSubmit={(e) => { e.preventDefault(); send(); }} style={{ display: "grid", gap: 8, font: "13px/1.5 system-ui,sans-serif" }}>
      <textarea value={value} onChange={(e) => setValue(e.target.value)} rows={4} placeholder={placeholder}
        aria-describedby="tm-count" aria-label="Prompt"
        onKeyDown={(e) => { if ((e.ctrlKey || e.metaKey) && e.key === "Enter") send(); }}
        style={{ resize: "vertical", border: "1px solid #d8deeb", borderRadius: 12, padding: "10px 12px", font: "14px/1.5 system-ui,sans-serif" }} />
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <div aria-hidden="true" style={{ flex: 1, height: 6, borderRadius: 999, background: "#eef1f7", overflow: "hidden" }}>
          <span style={{ display: "block", height: "100%", width: `${Math.min(k, 1) * 100}%`, background: color, transition: "width .25s, background .25s" }} />
        </div>
        <span id="tm-count" style={{ color: level === "over" ? "#d93025" : "#5c627c", fontVariantNumeric: "tabular-nums" }}>
          ~{n} / {limit} tokens{level === "over" ? " (over budget)" : ""}
        </span>
        <button type="submit" disabled={!can}
          style={{ border: 0, borderRadius: 999, padding: "8px 14px", background: "#0b1020", color: "#fff", fontWeight: 600, opacity: can ? 1 : 0.4 }}>
          Send
        </button>
      </div>
    </form>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// AI Prompt Suggestion Chips from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/src/components/ai/AiPromptChips.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: motion, lucide-react

import React from 'react';
import { motion } from 'motion/react';
import { Sparkles } from 'lucide-react';
import { useWebHaptics } from './use-web-haptics';

export interface AiPromptChipsProps {
  theme?: 'dark' | 'light';
  onSelectPrompt: (prompt: string) => void;
  chips?: Array<{ id: string; label: string; prompt: string; icon?: string }>;
}

const DEFAULT_CHIPS = [
  { id: '1', label: 'Spring Tilt Card', prompt: 'Create an interactive 3D card spread with spring tilt physics on cursor move', icon: '✨' },
  { id: '2', label: 'Particle Burst Button', prompt: 'Add dynamic multi-color particle burst micro-interaction on CTA button click', icon: '💥' },
  { id: '3', label: 'Reasoning Accordion', prompt: 'Build a collapsible AI reasoning trace block with live elapsed timer and status nodes', icon: '🧠' },
  { id: '4', label: 'Magnetic Pill Dock', prompt: 'Design a macOS inspired floating island dock with spring magnetic pull effect', icon: '🧲' },
];

export function AiPromptChips({
  theme = 'dark',
  onSelectPrompt,
  chips = DEFAULT_CHIPS,
}: AiPromptChipsProps) {
  const { trigger: triggerHaptic } = useWebHaptics();
  const isDark = theme === 'dark';

  return (
    <div className="w-full flex items-center justify-center select-none py-1">
      <div className="flex flex-wrap items-center justify-center gap-2 max-w-[800px]">
        {chips.map((chip, index) => (
          <motion.button
            key={chip.id}
            type="button"
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.05, duration: 0.25 }}
            whileHover={{ y: -2, scale: 1.03 }}
            whileTap={{ scale: 0.96 }}
            onClick={() => {
              triggerHaptic('light');
              onSelectPrompt(chip.prompt);
            }}
            className={`group inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium cursor-pointer border transition-all duration-200 ${
              isDark
                ? 'bg-white/[0.04] border-white/[0.08] hover:border-white/20 hover:bg-white/[0.08] text-neutral-300 hover:text-white'
                : 'bg-white border-neutral-200 hover:border-neutral-300 hover:bg-neutral-50 text-neutral-700 hover:text-black shadow-xs'
            }`}
          >
            <span>{chip.icon || '✨'}</span>
            <span>{chip.label}</span>
          </motion.button>
        ))}
      </div>
    </div>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// AI Floating Action Pill from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/src/components/ai/AiFloatingToolbar.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: motion, lucide-react

import React, { useState } from 'react';
import { motion } from 'motion/react';
import { Sparkles, Wand2, Terminal, Zap, Check } from 'lucide-react';
import { useWebHaptics } from './use-web-haptics';

export interface AiFloatingToolbarProps {
  theme?: 'dark' | 'light';
  onAction?: (actionId: string) => void;
}

export function AiFloatingToolbar({
  theme = 'dark',
  onAction,
}: AiFloatingToolbarProps) {
  const [activeAction, setActiveAction] = useState<string | null>(null);
  const { trigger: triggerHaptic } = useWebHaptics();
  const isDark = theme === 'dark';

  const actions = [
    { id: 'motion', label: 'Add Spring Motion', icon: Sparkles },
    { id: 'refactor', label: 'Refactor TSX', icon: Wand2 },
    { id: 'haptics', label: 'Add Haptics', icon: Zap },
    { id: 'cli', label: 'Generate CLI', icon: Terminal },
  ];

  const handleSelect = (id: string) => {
    triggerHaptic('medium');
    setActiveAction(id);
    if (onAction) onAction(id);
    setTimeout(() => setActiveAction(null), 1500);
  };

  return (
    <div className="w-full flex items-center justify-center py-2 select-none">
      <div 
        className={`flex items-center gap-1 p-1 rounded-full border shadow-xl backdrop-blur-xl ${
          isDark 
            ? 'bg-[#18181c]/90 border-white/10 text-white' 
            : 'bg-white/90 border-neutral-200 text-black shadow-lg'
        }`}
      >
        {actions.map((act) => {
          const Icon = act.icon;
          const isDone = activeAction === act.id;

          return (
            <motion.button
              key={act.id}
              type="button"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => handleSelect(act.id)}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium cursor-pointer border-0 transition-colors ${
                isDone
                  ? 'bg-emerald-500 text-white font-semibold'
                  : isDark
                  ? 'bg-transparent hover:bg-white/10 text-neutral-300 hover:text-white'
                  : 'bg-transparent hover:bg-neutral-100 text-neutral-700 hover:text-black'
              }`}
            >
              {isDone ? <Check className="w-3.5 h-3.5" /> : <Icon className="w-3.5 h-3.5" />}
              <span>{isDone ? 'Applied!' : act.label}</span>
            </motion.button>
          );
        })}
      </div>
    </div>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// AI Response Stream & Code Block from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/src/components/ai/AiResponseStream.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: motion, lucide-react

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Copy, Check, RotateCw, ThumbsUp, ThumbsDown, ChevronLeft, ChevronRight, Code2 } from 'lucide-react';
import { useWebHaptics } from './use-web-haptics';

export interface AiResponseStreamProps {
  theme?: 'dark' | 'light';
  title?: string;
  codeSnippet?: string;
  explanation?: string;
}

const DEFAULT_CODE = `import { motion } from "motion/react";

export function SpringCard() {
  return (
    <motion.div
      whileHover={{ y: -4, scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 400, damping: 28 }}
      className="p-6 rounded-2xl bg-zinc-900 border border-white/10 shadow-xl"
    >
      <h3 className="text-white font-semibold">Fluid Motion Card</h3>
      <p className="text-zinc-400 text-sm mt-1">Zero layout shifts, pure 60fps spring responsiveness.</p>
    </motion.div>
  );
}`;

export function AiResponseStream({
  theme = 'dark',
  title = "Generated Spring Component",
  codeSnippet = DEFAULT_CODE,
  explanation = "Here is the verified motion component utilizing cubic-spring damping physics. It compiles cleanly with Tailwind CSS v4 and React 19.",
}: AiResponseStreamProps) {
  const [copied, setCopied] = useState(false);
  const [isRotating, setIsRotating] = useState(false);
  const [vote, setVote] = useState<'up' | 'down' | null>(null);
  const [branchIndex, setBranchIndex] = useState(1);
  const totalBranches = 3;

  const { trigger: triggerHaptic } = useWebHaptics();
  const isDark = theme === 'dark';

  const handleCopy = () => {
    triggerHaptic('success');
    navigator.clipboard.writeText(codeSnippet);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleRegenerate = () => {
    triggerHaptic('medium');
    setIsRotating(true);
    setTimeout(() => setIsRotating(false), 800);
  };

  const handleVote = (type: 'up' | 'down') => {
    triggerHaptic('light');
    setVote(prev => prev === type ? null : type);
  };

  const handlePrevBranch = () => {
    triggerHaptic('light');
    setBranchIndex(prev => (prev > 1 ? prev - 1 : totalBranches));
  };

  const handleNextBranch = () => {
    triggerHaptic('light');
    setBranchIndex(prev => (prev < totalBranches ? prev + 1 : 1));
  };

  return (
    <div className="w-full max-w-[800px] mx-auto select-none">
      <div 
        className={`rounded-2xl border transition-all duration-200 overflow-hidden shadow-md ${
          isDark 
            ? 'bg-[#141417] border-white/[0.08] text-white shadow-black/40' 
            : 'bg-white border-neutral-200 text-black shadow-neutral-200/50'
        }`}
      >
        {/* Explanation text */}
        <div className="p-4 sm:p-5 pb-3">
          <p className={`text-[13.5px] sm:text-[14px] leading-relaxed m-0 ${isDark ? 'text-neutral-300' : 'text-neutral-700'}`}>
            {explanation}
          </p>
        </div>

        {/* Code Snippet Box */}
        <div className="px-4 sm:px-5 pb-4">
          <div className={`rounded-xl border overflow-hidden ${
            isDark ? 'bg-[#0d0d0f] border-white/[0.06]' : 'bg-neutral-50 border-neutral-200'
          }`}>
            {/* Code Header Bar */}
            <div className={`flex items-center justify-between px-3.5 py-2 border-b text-xs ${
              isDark ? 'border-white/[0.06] text-neutral-400 bg-white/[0.02]' : 'border-neutral-200 text-neutral-600 bg-neutral-100/50'
            }`}>
              <div className="flex items-center gap-2">
                <Code2 className="w-3.5 h-3.5 text-neutral-500" />
                <span className="font-mono text-[11px] font-medium">SpringCard.tsx</span>
              </div>
              <button
                type="button"
                onClick={handleCopy}
                className={`flex items-center gap-1.5 px-2 py-1 rounded-md cursor-pointer border-0 transition-colors text-xs ${
                  isDark ? 'hover:bg-white/10 text-neutral-300' : 'hover:bg-neutral-200 text-neutral-700'
                }`}
              >
                {copied ? <Check className="w-3 h-3 text-emerald-500" /> : <Copy className="w-3 h-3" />}
                <span className="text-[11px]">{copied ? 'Copied' : 'Copy'}</span>
              </button>
            </div>

            {/* Code Content */}
            <pre className="p-3.5 sm:p-4 text-xs font-mono leading-relaxed overflow-x-auto m-0 text-neutral-300">
              <code>{codeSnippet}</code>
            </pre>
          </div>
        </div>

        {/* Micro-Action Response Footer Bar */}
        <div className={`flex items-center justify-between px-4 sm:px-5 py-2.5 border-t text-xs ${
          isDark ? 'border-white/[0.06] bg-white/[0.01]' : 'border-neutral-100 bg-neutral-50/50'
        }`}>
          
          {/* Left: Branch Version Switcher (< 1 of 3 >) */}
          <div className="flex items-center gap-1.5">
            <button
              type="button"
              onClick={handlePrevBranch}
              className={`p-1 rounded-md cursor-pointer border-0 transition-colors ${
                isDark ? 'hover:bg-white/10 text-neutral-400' : 'hover:bg-neutral-200 text-neutral-600'
              }`}
              title="Previous variation"
            >
              <ChevronLeft className="w-3.5 h-3.5" />
            </button>
            <span className="font-mono text-[11px] text-neutral-500">
              {branchIndex} / {totalBranches}
            </span>
            <button
              type="button"
              onClick={handleNextBranch}
              className={`p-1 rounded-md cursor-pointer border-0 transition-colors ${
                isDark ? 'hover:bg-white/10 text-neutral-400' : 'hover:bg-neutral-200 text-neutral-600'
              }`}
              title="Next variation"
            >
              <ChevronRight className="w-3.5 h-3.5" />
            </button>
          </div>

          {/* Right: Actions (Copy, Regenerate, Upvote, Downvote) */}
          <div className="flex items-center gap-1">
            
            {/* Copy Button */}
            <motion.button
              type="button"
              whileTap={{ scale: 0.9 }}
              onClick={handleCopy}
              className={`p-1.5 rounded-lg cursor-pointer border-0 transition-colors ${
                isDark ? 'hover:bg-white/10 text-neutral-400 hover:text-white' : 'hover:bg-neutral-200 text-neutral-600'
              }`}
              title="Copy output"
            >
              {copied ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
            </motion.button>

            {/* Regenerate Button */}
            <motion.button
              type="button"
              whileTap={{ scale: 0.9 }}
              onClick={handleRegenerate}
              className={`p-1.5 rounded-lg cursor-pointer border-0 transition-colors ${
                isDark ? 'hover:bg-white/10 text-neutral-400 hover:text-white' : 'hover:bg-neutral-200 text-neutral-600'
              }`}
              title="Regenerate alternative"
            >
              <motion.div
                animate={isRotating ? { rotate: 360 } : { rotate: 0 }}
                transition={{ duration: 0.25, ease: 'easeInOut' }}
              >
                <RotateCw className="w-3.5 h-3.5" />
              </motion.div>
            </motion.button>

            {/* Thumbs Up */}
            <motion.button
              type="button"
              whileTap={{ scale: 0.88 }}
              onClick={() => handleVote('up')}
              className={`p-1.5 rounded-lg cursor-pointer border-0 transition-colors ${
                vote === 'up'
                  ? 'bg-emerald-500/20 text-emerald-400'
                  : isDark ? 'hover:bg-white/10 text-neutral-400 hover:text-white' : 'hover:bg-neutral-200 text-neutral-600'
              }`}
              title="Helpful output"
            >
              <ThumbsUp className="w-3.5 h-3.5" />
            </motion.button>

            {/* Thumbs Down */}
            <motion.button
              type="button"
              whileTap={{ scale: 0.88 }}
              onClick={() => handleVote('down')}
              className={`p-1.5 rounded-lg cursor-pointer border-0 transition-colors ${
                vote === 'down'
                  ? 'bg-rose-500/20 text-rose-400'
                  : isDark ? 'hover:bg-white/10 text-neutral-400 hover:text-white' : 'hover:bg-neutral-200 text-neutral-600'
              }`}
              title="Not what I needed"
            >
              <ThumbsDown className="w-3.5 h-3.5" />
            </motion.button>
          </div>
        </div>
      </div>
    </div>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// AI Prompt Input Studio from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/src/components/ai/AiPromptInput.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: motion, lucide-react

import React, { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { 
  ArrowUp, 
  Square, 
  Mic, 
  Paperclip, 
  Globe, 
  Brain, 
  Sparkles, 
  ChevronDown, 
  Check, 
  X,
  Volume2
} from 'lucide-react';
import { useWebHaptics } from './use-web-haptics';

export interface AiPromptInputProps {
  theme?: 'dark' | 'light';
  onSend?: (prompt: string, model: string, options: { search: boolean; deepThink: boolean }) => void;
  className?: string;
  initialValue?: string;
}

const AI_MODELS = [
  { id: 'claude-3-7', name: 'Claude 3.7 Sonnet', badge: 'Fast Reasoning', icon: '🧠' },
  { id: 'gpt-4o', name: 'GPT-4o', badge: 'Omni Multimodal', icon: '⚡' },
  { id: 'deepseek-r1', name: 'DeepSeek R1', badge: 'Open Math/Code', icon: '🔷' },
  { id: 'gemini-2-5', name: 'Gemini 2.5 Flash', badge: 'Ultra Low Latency', icon: '✨' },
];

const SUGGESTIONS = [
  "Create a spring physics card with subtle 3D tilt",
  "Add particle burst micro-interaction on button click",
  "Design a fluid floating dock with magnetic icon pull",
  "Generate an AI streaming text input with haptic feedback",
];

export function AiPromptInput({
  theme = 'dark',
  onSend,
  className = '',
  initialValue = '',
}: AiPromptInputProps) {
  const [prompt, setPrompt] = useState(initialValue);
  const [selectedModel, setSelectedModel] = useState(AI_MODELS[0]);
  const [modelDropdownOpen, setModelDropdownOpen] = useState(false);
  const [isWebSearchActive, setIsWebSearchActive] = useState(false);
  const [isDeepThinkActive, setIsDeepThinkActive] = useState(true);
  const [isRecording, setIsRecording] = useState(false);
  const [isGenerating, setIsGenerating] = useState(false);
  const [attachedFiles, setAttachedFiles] = useState<string[]>([]);
  const [isFocused, setIsFocused] = useState(false);

  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const { trigger: triggerHaptic } = useWebHaptics();
  const isDark = theme === 'dark';

  // Sync external initialValue if changed
  useEffect(() => {
    if (initialValue) {
      setPrompt(initialValue);
      if (textareaRef.current) {
        textareaRef.current.style.height = 'auto';
        textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 180)}px`;
      }
    }
  }, [initialValue]);

  // Auto-resize textarea
  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setPrompt(e.target.value);
    const target = e.target;
    target.style.height = 'auto';
    target.style.height = `${Math.min(target.scrollHeight, 200)}px`;
  };

  const handleToggleSearch = () => {
    triggerHaptic('light');
    setIsWebSearchActive(prev => !prev);
  };

  const handleToggleDeepThink = () => {
    triggerHaptic('light');
    setIsDeepThinkActive(prev => !prev);
  };

  const handleToggleRecord = () => {
    triggerHaptic('medium');
    setIsRecording(prev => !prev);
    if (!isRecording) {
      // simulate speech-to-text
      setTimeout(() => {
        setPrompt(prev => prev + (prev ? " " : "") + "Add haptic spring physics to card carousel");
        setIsRecording(false);
        triggerHaptic('success');
      }, 2500);
    }
  };

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      triggerHaptic('light');
      const names = Array.from(files).map((f: File) => f.name);
      setAttachedFiles(prev => [...prev, ...names]);
    }
  };

  const removeFile = (index: number) => {
    triggerHaptic('light');
    setAttachedFiles(prev => prev.filter((_, i) => i !== index));
  };

  const handleSubmit = () => {
    if (isGenerating) {
      // Stop generating
      triggerHaptic('medium');
      setIsGenerating(false);
      return;
    }

    if (!prompt.trim() && attachedFiles.length === 0) return;

    triggerHaptic('success');
    setIsGenerating(true);

    if (onSend) {
      onSend(prompt, selectedModel.id, {
        search: isWebSearchActive,
        deepThink: isDeepThinkActive,
      });
    }

    // Simulate completion
    setTimeout(() => {
      setIsGenerating(false);
    }, 3500);
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSubmit();
    }
  };

  const tokenEstimate = Math.ceil((prompt.length || 0) / 3.8);

  return (
    <div className={`relative w-full max-w-[800px] mx-auto select-none ${className}`}>
      
      {/* Subtle border highlight on focus */}
      <div 
        aria-hidden="true" 
        className={`absolute -inset-0.5 rounded-[26px] border border-white/20 transition-opacity duration-200 pointer-events-none ${
          isFocused ? 'opacity-100' : 'opacity-0'
        }`}
      />

      {/* Main Container Card */}
      <div 
        className={`relative w-full rounded-[24px] border p-3 sm:p-4 transition-all duration-200 flex flex-col gap-2.5 shadow-lg ${
          isDark 
            ? 'bg-[#141417]/95 border-white/[0.1] text-white shadow-black/50' 
            : 'bg-white/95 border-neutral-200/90 text-black shadow-neutral-200/60'
        }`}
      >
        {/* Attached Files List */}
        <AnimatePresence>
          {attachedFiles.length > 0 && (
            <motion.div 
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: 'auto' }}
              exit={{ opacity: 0, height: 0 }}
              className="flex flex-wrap items-center gap-2 px-1 pt-1"
            >
              {attachedFiles.map((file, idx) => (
                <motion.div
                  key={idx}
                  initial={{ scale: 0.8, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  exit={{ scale: 0.8, opacity: 0 }}
                  className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs border ${
                    isDark ? 'bg-white/[0.06] border-white/10 text-neutral-300' : 'bg-neutral-100 border-neutral-200 text-neutral-700'
                  }`}
                >
                  <Paperclip className="w-3 h-3 text-neutral-400" />
                  <span className="truncate max-w-[120px] font-mono">{file}</span>
                  <button
                    type="button"
                    onClick={() => removeFile(idx)}
                    className="p-0.5 rounded-full hover:bg-white/10 cursor-pointer border-0 bg-transparent text-neutral-400 hover:text-white"
                  >
                    <X className="w-3 h-3" />
                  </button>
                </motion.div>
              ))}
            </motion.div>
          )}
        </AnimatePresence>

        {/* Textarea Input Row */}
        <div className="relative w-full min-h-[44px] flex items-start">
          <textarea
            ref={textareaRef}
            rows={1}
            value={prompt}
            onChange={handleInput}
            onKeyDown={handleKeyDown}
            onFocus={() => setIsFocused(true)}
            onBlur={() => setIsFocused(false)}
            placeholder={isRecording ? "Listening to audio..." : "Ask Amicro to generate spring micro-interactions or components..."}
            className={`w-full bg-transparent border-0 outline-none resize-none text-[14px] sm:text-[15px] leading-[22px] sm:leading-[24px] tracking-[-0.01em] placeholder:text-neutral-500 font-sans p-1 focus:ring-0 ${
              isDark ? 'text-white' : 'text-neutral-900'
            }`}
          />
        </div>

        {/* Audio Recording Active Waveform */}
        <AnimatePresence>
          {isRecording && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: 'auto' }}
              exit={{ opacity: 0, height: 0 }}
              className="flex items-center gap-3 px-2 py-1 text-xs text-rose-500 font-medium"
            >
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-rose-500"></span>
              </span>
              <span>Recording Voice Dictation...</span>
              <div className="flex items-center gap-0.5 h-3 ml-2">
                {[40, 80, 50, 100, 60, 90, 40].map((h, i) => (
                  <motion.div
                    key={i}
                    animate={{ height: ['20%', `${h}%`, '20%'] }}
                    transition={{ repeat: Infinity, duration: 0.6, delay: i * 0.08 }}
                    className="w-1 bg-rose-500 rounded-full"
                  />
                ))}
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        {/* Bottom Control Bar */}
        <div className="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-white/[0.06]">
          
          {/* Left Action Buttons: Model Selector & Capabilities */}
          <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
            
            {/* Model Selector Dropdown Pill */}
            <div className="relative">
              <button
                type="button"
                onClick={() => {
                  triggerHaptic('light');
                  setModelDropdownOpen(prev => !prev);
                }}
                className={`flex items-center gap-1.5 h-7 px-2.5 rounded-full text-xs font-medium cursor-pointer border transition-colors ${
                  isDark 
                    ? 'bg-white/[0.06] border-white/[0.08] hover:bg-white/[0.12] text-neutral-300' 
                    : 'bg-neutral-100 border-neutral-200 hover:bg-neutral-200 text-neutral-700'
                }`}
              >
                <span>{selectedModel.icon}</span>
                <span className="font-semibold">{selectedModel.name.split(' ')[0]}</span>
                <ChevronDown className="w-3 h-3 opacity-60" />
              </button>

              <AnimatePresence>
                {modelDropdownOpen && (
                  <motion.div
                    initial={{ opacity: 0, y: -4, scale: 0.95 }}
                    animate={{ opacity: 1, y: 0, scale: 1 }}
                    exit={{ opacity: 0, y: -4, scale: 0.95 }}
                    transition={{ duration: 0.15 }}
                    className={`absolute bottom-full left-0 mb-2 w-56 rounded-2xl border p-1.5 shadow-xl z-50 flex flex-col gap-1 ${
                      isDark 
                        ? 'bg-[#18181c] border-white/10 text-white' 
                        : 'bg-white border-neutral-200 text-black shadow-lg'
                    }`}
                  >
                    <div className="px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider text-neutral-500">
                      Select LLM
                    </div>
                    {AI_MODELS.map(m => {
                      const isSel = selectedModel.id === m.id;
                      return (
                        <button
                          key={m.id}
                          type="button"
                          onClick={() => {
                            triggerHaptic('light');
                            setSelectedModel(m);
                            setModelDropdownOpen(false);
                          }}
                          className={`flex items-center justify-between w-full px-2.5 py-1.5 rounded-xl text-xs text-left cursor-pointer transition-colors border-0 ${
                            isSel 
                              ? isDark ? 'bg-white/10 font-semibold' : 'bg-neutral-100 font-semibold'
                              : 'hover:bg-white/[0.06] text-neutral-400 hover:text-white'
                          }`}
                        >
                          <div className="flex items-center gap-2">
                            <span>{m.icon}</span>
                            <div className="flex flex-col">
                              <span>{m.name}</span>
                              <span className="text-[10px] text-neutral-500">{m.badge}</span>
                            </div>
                          </div>
                          {isSel && <Check className="w-3.5 h-3.5 text-emerald-500" />}
                        </button>
                      );
                    })}
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

            {/* Deep Think / Reasoning Toggle */}
            <motion.button
              type="button"
              whileTap={{ scale: 0.94 }}
              onClick={handleToggleDeepThink}
              className={`flex items-center gap-1.5 h-7 px-2.5 rounded-full text-xs font-medium cursor-pointer border transition-all ${
                isDeepThinkActive
                  ? 'bg-purple-500/15 border-purple-500/40 text-purple-400 font-semibold'
                  : isDark
                  ? 'bg-transparent border-white/[0.08] hover:bg-white/[0.06] text-neutral-400'
                  : 'bg-transparent border-neutral-200 hover:bg-neutral-100 text-neutral-600'
              }`}
              title="Deep Thinking & Reasoning traces"
            >
              <Brain className={`w-3.5 h-3.5 ${isDeepThinkActive ? 'text-purple-400' : ''}`} />
              <span className="hidden sm:inline">Reason</span>
            </motion.button>

            {/* Web Search Toggle */}
            <motion.button
              type="button"
              whileTap={{ scale: 0.94 }}
              onClick={handleToggleSearch}
              className={`flex items-center gap-1.5 h-7 px-2.5 rounded-full text-xs font-medium cursor-pointer border transition-all ${
                isWebSearchActive
                  ? 'bg-blue-500/15 border-blue-500/40 text-blue-400 font-semibold'
                  : isDark
                  ? 'bg-transparent border-white/[0.08] hover:bg-white/[0.06] text-neutral-400'
                  : 'bg-transparent border-neutral-200 hover:bg-neutral-100 text-neutral-600'
              }`}
              title="Live Web Search synthesis"
            >
              <Globe className={`w-3.5 h-3.5 ${isWebSearchActive ? 'text-blue-400' : ''}`} />
              <span className="hidden sm:inline">Search</span>
            </motion.button>

            {/* Attach File Button */}
            <input
              ref={fileInputRef}
              type="file"
              multiple
              className="hidden"
              onChange={handleFileUpload}
            />
            <motion.button
              type="button"
              whileTap={{ scale: 0.92 }}
              onClick={() => {
                triggerHaptic('light');
                fileInputRef.current?.click();
              }}
              className={`flex items-center justify-center w-7 h-7 rounded-full cursor-pointer border transition-colors ${
                isDark 
                  ? 'border-white/[0.08] hover:bg-white/[0.08] text-neutral-400 hover:text-white' 
                  : 'border-neutral-200 hover:bg-neutral-100 text-neutral-600'
              }`}
              title="Attach code snippet or image"
            >
              <Paperclip className="w-3.5 h-3.5" />
            </motion.button>

            {/* Voice Dictation Button */}
            <motion.button
              type="button"
              whileTap={{ scale: 0.92 }}
              onClick={handleToggleRecord}
              className={`flex items-center justify-center w-7 h-7 rounded-full cursor-pointer border transition-colors ${
                isRecording 
                  ? 'bg-rose-500/20 border-rose-500 text-rose-500' 
                  : isDark
                  ? 'border-white/[0.08] hover:bg-white/[0.08] text-neutral-400 hover:text-white'
                  : 'border-neutral-200 hover:bg-neutral-100 text-neutral-600'
              }`}
              title="Voice dictation"
            >
              <Mic className="w-3.5 h-3.5" />
            </motion.button>
          </div>

          {/* Right Action Buttons: Token Counter & Send/Stop Morph */}
          <div className="flex items-center gap-2 ml-auto">
            {prompt.length > 0 && (
              <span className="text-[11px] font-mono text-neutral-500 hidden sm:inline">
                ~{tokenEstimate} toks
              </span>
            )}

            {/* Submit / Stop Morphing Button */}
            <motion.button
              type="button"
              whileHover={{ scale: 1.08 }}
              whileTap={{ scale: 0.92 }}
              onClick={handleSubmit}
              disabled={!prompt.trim() && attachedFiles.length === 0 && !isGenerating}
              className={`flex items-center justify-center w-8 h-8 rounded-full cursor-pointer transition-all duration-200 border-0 ${
                isGenerating
                  ? 'bg-rose-600 text-white shadow-md'
                  : prompt.trim() || attachedFiles.length > 0
                  ? isDark
                    ? 'bg-white text-black hover:bg-neutral-200 shadow-md'
                    : 'bg-black text-white hover:bg-neutral-800 shadow-md'
                  : isDark
                  ? 'bg-white/10 text-neutral-500 cursor-not-allowed'
                  : 'bg-neutral-200 text-neutral-400 cursor-not-allowed'
              }`}
              title={isGenerating ? "Stop generating" : "Submit prompt"}
            >
              <AnimatePresence mode="wait">
                {isGenerating ? (
                  <motion.div
                    key="stop-icon"
                    initial={{ rotate: -90, scale: 0.6 }}
                    animate={{ rotate: 0, scale: 1 }}
                    exit={{ rotate: 90, scale: 0.6 }}
                    transition={{ duration: 0.15 }}
                  >
                    <Square className="w-3.5 h-3.5 fill-current" />
                  </motion.div>
                ) : (
                  <motion.div
                    key="send-icon"
                    initial={{ rotate: -90, scale: 0.6 }}
                    animate={{ rotate: 0, scale: 1 }}
                    exit={{ rotate: 90, scale: 0.6 }}
                    transition={{ duration: 0.15 }}
                  >
                    <ArrowUp className="w-4 h-4 stroke-[2.5]" />
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.button>
          </div>
        </div>
      </div>
    </div>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// AI Reasoning Trace Accordion from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/src/components/ai/AiReasoningTrace.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: motion, lucide-react

import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Brain, ChevronDown, CheckCircle2, Clock, Sparkles, Copy, Check } from 'lucide-react';
import { useWebHaptics } from './use-web-haptics';

export interface AiReasoningTraceProps {
  theme?: 'dark' | 'light';
  durationSeconds?: number;
  steps?: string[];
  isStreaming?: boolean;
}

const DEFAULT_STEPS = [
  "Analyzing micro-interaction physics and component layout...",
  "Evaluating spring stiffness (420) and damping (28) ratios for 60fps responsiveness...",
  "Computing responsive touch targets (minimum 44px) for mobile gestures...",
  "Synthesizing zero-dependency TSX primitives with Framer Motion integration...",
  "Finalizing verified component architecture and copy-paste registry payload.",
];

export function AiReasoningTrace({
  theme = 'dark',
  durationSeconds = 3.2,
  steps = DEFAULT_STEPS,
  isStreaming = false,
}: AiReasoningTraceProps) {
  const [isOpen, setIsOpen] = useState(true);
  const [copied, setCopied] = useState(false);
  const [activeStepIdx, setActiveStepIdx] = useState(isStreaming ? 0 : steps.length);
  const { trigger: triggerHaptic } = useWebHaptics();
  const isDark = theme === 'dark';

  useEffect(() => {
    if (isStreaming) {
      const interval = setInterval(() => {
        setActiveStepIdx(prev => {
          if (prev < steps.length) return prev + 1;
          clearInterval(interval);
          return prev;
        });
      }, 700);
      return () => clearInterval(interval);
    } else {
      setActiveStepIdx(steps.length);
    }
  }, [isStreaming, steps.length]);

  const handleCopyTrace = () => {
    triggerHaptic('success');
    navigator.clipboard.writeText(steps.join('\n'));
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="w-full max-w-[800px] mx-auto select-none">
      <div 
        className={`rounded-2xl border transition-all duration-200 overflow-hidden ${
          isDark 
            ? 'bg-[#121215] border-purple-500/20 text-neutral-300' 
            : 'bg-purple-50/50 border-purple-200/80 text-neutral-800'
        }`}
      >
        {/* Header Bar */}
        <div className="flex items-center justify-between px-3.5 sm:px-4 py-2.5 sm:py-3 border-b border-purple-500/15">
          <button
            type="button"
            onClick={() => {
              triggerHaptic('light');
              setIsOpen(prev => !prev);
            }}
            className="flex items-center gap-2.5 cursor-pointer border-0 bg-transparent p-0 text-inherit hover:opacity-90"
          >
            <div className="relative flex items-center justify-center w-6 h-6 rounded-lg bg-purple-500/15 text-purple-400">
              <Brain className="w-3.5 h-3.5" />
              {isStreaming && (
                <span className="absolute -top-0.5 -right-0.5 flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-purple-500"></span>
                </span>
              )}
            </div>

            <div className="flex items-center gap-2">
              <span className="text-[13px] font-semibold text-purple-400">
                {isStreaming ? "Thinking in progress..." : `Thought for ${durationSeconds}s`}
              </span>
              <span className="text-[11px] text-neutral-500 flex items-center gap-1 font-mono">
                <Clock className="w-3 h-3" />
                {steps.length} reasoning steps
              </span>
            </div>

            <ChevronDown 
              className={`w-3.5 h-3.5 text-neutral-400 transition-transform duration-200 ${
                isOpen ? 'rotate-180' : ''
              }`}
            />
          </button>

          {/* Right: Copy Trace */}
          <button
            type="button"
            onClick={handleCopyTrace}
            className={`p-1.5 rounded-lg text-xs flex items-center gap-1 cursor-pointer border-0 transition-colors ${
              isDark ? 'hover:bg-white/10 text-neutral-400 hover:text-white' : 'hover:bg-purple-100 text-neutral-600'
            }`}
            title="Copy thought trace"
          >
            {copied ? (
              <>
                <Check className="w-3 h-3 text-emerald-500" />
                <span className="text-[11px] text-emerald-500">Copied</span>
              </>
            ) : (
              <>
                <Copy className="w-3 h-3" />
                <span className="text-[11px] hidden sm:inline">Copy trace</span>
              </>
            )}
          </button>
        </div>

        {/* Expandable Reasoning Steps */}
        <AnimatePresence initial={false}>
          {isOpen && (
            <motion.div
              initial={{ height: 0, opacity: 0 }}
              animate={{ height: 'auto', opacity: 1 }}
              exit={{ height: 0, opacity: 0 }}
              transition={{ duration: 0.22, ease: [0.16, 1, 0.3, 1] }}
              className="overflow-hidden"
            >
              <div className="p-3.5 sm:p-4 space-y-2.5 font-sans">
                {steps.map((step, idx) => {
                  const isCompleted = idx < activeStepIdx;
                  const isCurrent = idx === activeStepIdx;

                  return (
                    <motion.div
                      key={idx}
                      initial={{ opacity: 0, x: -6 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: idx * 0.05 }}
                      className="flex items-start gap-2.5 text-xs sm:text-[13px] leading-relaxed"
                    >
                      <div className="pt-0.5 shrink-0">
                        {isCompleted ? (
                          <CheckCircle2 className="w-3.5 h-3.5 text-purple-400" />
                        ) : isCurrent ? (
                          <Sparkles className="w-3.5 h-3.5 text-amber-400 animate-spin" />
                        ) : (
                          <span className="inline-block w-3.5 h-3.5 rounded-full border border-neutral-600" />
                        )}
                      </div>
                      <p className={`m-0 ${isCompleted ? 'text-neutral-300' : 'text-neutral-500'}`}>
                        {step}
                      </p>
                    </motion.div>
                  );
                })}
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Activity Dither Heatmap from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/src/components/dither-charts/ActivityHeatmap.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: motion, lucide-react

import React, { useEffect, useRef, useState, useMemo } from 'react';
import { motion, useSpring, useTransform, useReducedMotion } from 'motion/react';
import { Activity } from 'lucide-react';
import { useCanvasSetup } from './use-canvas-setup';

const PERIODS = [
  { name: 'Last 3 Months', weeks: 12 },
  { name: 'Last 6 Months', weeks: 24 },
];

const smoothstep = (min: number, max: number, value: number) => {
  const x = Math.max(0, Math.min(1, (value - min) / (max - min)));
  return x * x * (3 - 2 * x);
};

const hash = (x: number, y: number) => {
  let h = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
  return h - Math.floor(h);
};

function AnimatedNumber({ value }: { value: number }) {
  const prefersReducedMotion = useReducedMotion();
  const spring = useSpring(value, { stiffness: 190, damping: 20, mass: 0.7 });
  const display = useTransform(spring, (current) =>
    Math.round(current).toLocaleString('en-US')
  );
  useEffect(() => {
    if (prefersReducedMotion) spring.jump(value);
    else spring.set(value);
  }, [value, spring, prefersReducedMotion]);
  return <motion.span className="tabular-nums">{display}</motion.span>;
}

export function ActivityHeatmap({ theme = 'dark', compact = false }: { theme?: 'dark' | 'light'; compact?: boolean }) {
  const [periodIndex, setPeriodIndex] = useState(0);
  const { canvasRef, rect, isVisible, reducedMotion } = useCanvasSetup();
  const period = PERIODS[periodIndex];

  const { data, total } = useMemo(() => {
    const weeks = period.weeks;
    const newData = [];
    let tot = 0;
    for (let w = 0; w < weeks; w++) {
      const col = [];
      for (let d = 0; d < 7; d++) {
        const val = Math.floor(Math.sin(w * 0.5 + d * 0.2) * 2 + Math.cos(w * 1.2) * 1.5 + 2);
        const clamped = Math.max(0, Math.min(4, val));
        col.push(clamped);
        tot += clamped * 10;
      }
      newData.push(col);
    }
    return { data: newData, total: tot };
  }, [periodIndex]);

  const targetDataRef = useRef(data);
  const fromDataRef = useRef(data);
  const morphStartTimeRef = useRef(0);
  const timeRef = useRef(0);

  useEffect(() => {
    fromDataRef.current = targetDataRef.current;
    targetDataRef.current = data;
    morphStartTimeRef.current = performance.now();
  }, [data]);

  useEffect(() => {
    let req: number;
    const draw = () => {
      if (!isVisible.current) { req = requestAnimationFrame(draw); return; }

      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      const { width: w, height: h } = rect.current;
      if (w === 0 || h === 0) { req = requestAnimationFrame(draw); return; }

      timeRef.current += reducedMotion ? 0 : 0.02;

      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      ctx.save();
      ctx.scale(dpr, dpr);
      ctx.clearRect(0, 0, w, h);

      const prog = reducedMotion ? 1 : Math.min(1, (performance.now() - morphStartTimeRef.current) / 500);
      const e = 1 - Math.pow(2, -10 * prog);

      const weeks = Math.max(fromDataRef.current.length, targetDataRef.current.length);
      const cellSize = 10;
      const gap = 2.5;
      const totalW = weeks * (cellSize + gap) - gap;
      const totalH = 7 * (cellSize + gap) - gap;

      const startX = (w - totalW) / 2;
      const startY = (h - totalH) / 2;

      const colors = ['rgba(255,255,255,0.15)', 'rgba(255,255,255,0.35)', 'rgba(255,255,255,0.55)', 'rgba(255,255,255,0.75)', '#FFFFFF'];
      const cell = Math.max(2, Math.round(w / 250));
      const t2 = timeRef.current;

      for (let wk = 0; wk < weeks; wk++) {
        for (let d = 0; d < 7; d++) {
          const targetVal = targetDataRef.current[wk]?.[d] || 0;
          const fromVal = fromDataRef.current[wk]?.[d] || 0;
          const val = fromVal + (targetVal - fromVal) * e;

          const x = startX + wk * (cellSize + gap);
          const y = startY + d * (cellSize + gap);

          const colorIdx = Math.max(0, Math.min(4, Math.round(val)));

          ctx.save();
          ctx.beginPath();
          ctx.rect(x, y, cellSize, cellSize);
          ctx.clip();

          ctx.globalAlpha = 0.85;
          ctx.fillStyle = colors[colorIdx];

          for (let tx = Math.floor(x); tx <= Math.ceil(x + cellSize); tx += cell) {
            for (let ty = Math.floor(y); ty <= Math.ceil(y + cellSize); ty += cell) {
              const jx = tx + cell / 2;
              const jy = ty + cell / 2;
              const jit = hash(jx, jy);

              const waveRaw = reducedMotion ? 0 :
                Math.sin(jx * 0.05 + t2) + Math.sin(jy * 0.05 + t2 * 0.7);
              const mod = smoothstep(-1.5, 1.5, waveRaw);

              const sz = cell * (0.4 + 0.4 * mod) * (0.8 + 0.4 * jit);
              ctx.fillRect(tx + (cell - sz)/2, ty + (cell - sz)/2, sz, sz);
            }
          }
          ctx.restore();
        }
      }
      ctx.restore();
      req = requestAnimationFrame(draw);
    };
    req = requestAnimationFrame(draw);
    return () => cancelAnimationFrame(req);
  }, [reducedMotion]);

  return (
    <div className="w-full h-full flex flex-col items-center justify-center p-2">
      <div className="w-full flex flex-col items-center gap-2">
        {!compact && (
          <div className="flex items-center justify-between w-full px-2">
            <span className={`text-xs font-semibold ${theme === 'dark' ? 'text-white' : 'text-black'}`}>
              <AnimatedNumber value={total} /> contributions
            </span>
          </div>
        )}
        <div className="w-full flex justify-center">
          <canvas ref={canvasRef} className="w-full h-[120px]" />
        </div>
      </div>
    </div>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Uptime Dither Bar Chart from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/src/components/dither-charts/UptimeChart.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: motion, lucide-react

import React, { useEffect, useRef } from 'react';
import { useCanvasSetup } from './use-canvas-setup';

const smoothstep = (min: number, max: number, value: number) => {
  const x = Math.max(0, Math.min(1, (value - min) / (max - min)));
  return x * x * (3 - 2 * x);
};

const hash = (x: number, y: number) => {
  let h = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
  return h - Math.floor(h);
};

const UPTIME_DATA = Array.from({ length: 90 }, (_, i) => {
  if (i === 12 || i === 45 || i === 78) return 0.8;
  if (i === 22 || i === 60) return 0;
  return 1;
});

export function UptimeChart({ theme = 'dark', compact = false }: { theme?: 'dark' | 'light'; compact?: boolean }) {
  const { canvasRef, rect, isVisible, reducedMotion } = useCanvasSetup();

  useEffect(() => {
    let req: number;
    // Throttle to 30fps — content is static grid, no fast motion needed
    let lastFrame = 0;
    let time = 0;
    const draw = (now: number) => {
      req = requestAnimationFrame(draw);
      if (!isVisible.current) return;
      if (now - lastFrame < 33) return; // ~30fps
      lastFrame = now;

      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      const { width: w, height: h } = rect.current;
      if (w <= 0 || h <= 0) return;

      time += reducedMotion ? 0 : 0.02;

      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      ctx.save();
      ctx.scale(dpr, dpr);
      ctx.clearRect(0, 0, w, h);

      const days = UPTIME_DATA.length;

      const barW = 6;
      const gap = 2;
      const perRow = Math.max(1, Math.floor(w / (barW + gap)));
      const cell = 2;
      const t2 = time;

      for (let i = 0; i < days; i++) {
        const row = Math.floor(i / perRow);
        const col = i % perRow;

        const x = col * (barW + gap);
        const y = row * (26 + gap);

        const val = UPTIME_DATA[i];
        const color = val === 1 ? '#FFFFFF' : val === 0 ? 'rgba(255,255,255,0.3)' : 'rgba(255,255,255,0.6)';

        ctx.save();
        ctx.beginPath();
        ctx.rect(x, y, barW, 26);
        ctx.clip();

        ctx.globalAlpha = 0.85;
        ctx.fillStyle = color;

        for (let tx = x; tx <= x + barW; tx += cell) {
          for (let ty = y; ty <= y + 26; ty += cell) {
            const jx = tx + cell / 2;
            const jy = ty + cell / 2;
            const jit = hash(jx, jy);

            const waveRaw = reducedMotion ? 0 :
              Math.sin(jx * 0.05 + t2) + Math.sin(jy * 0.05 + t2 * 0.7);
            const mod = smoothstep(-1.5, 1.5, waveRaw);

            const sz = cell * (0.3 + 0.4 * mod) * (0.8 + 0.4 * jit);
            ctx.fillRect(tx + (cell - sz)/2, ty + (cell - sz)/2, sz, sz);
          }
        }
        ctx.restore();
      }

      ctx.restore();
    };

    req = requestAnimationFrame(draw);
    return () => cancelAnimationFrame(req);
  }, [reducedMotion]);

  return (
    <div className="w-full h-full flex flex-col items-center justify-center p-2">
      <div className="relative w-full h-[60px] flex items-center justify-center px-2">
        <canvas ref={canvasRef} className="w-full h-full" />
      </div>
    </div>
  );
}