// Quick-add overlay — three styles: spotlight, inline (handled in dropdown), floating
const { useState: qaS, useEffect: qaE, useRef: qaR, useMemo: qaM } = React;

const NATURAL_HINTS = [
  { match: /\btoday\b/i,        chip: "Today",       icon: "clock" },
  { match: /\btomorrow\b/i,     chip: "Tomorrow",    icon: "clock" },
  { match: /\bfri(day)?\b/i,    chip: "Friday",      icon: "clock" },
  { match: /\bmon(day)?\b/i,    chip: "Monday",      icon: "clock" },
  { match: /@high/i,            chip: "!! High",     icon: "flag", color: "var(--red)" },
  { match: /@med(ium)?/i,       chip: "! Medium",    icon: "flag", color: "var(--orange)" },
  { match: /@low/i,             chip: "Low",         icon: "flag", color: "var(--gray-2)" },
];

const parseDraft = (text, projects) => {
  const tags = [...text.matchAll(/#([\w-]+)/g)].map(m => m[1]);
  const proj = projects.find(p => new RegExp(`\\+${p.id}\\b|\\+${p.name.toLowerCase().replace(/\s+/g, "")}\\b`, "i").test(text));
  const hints = NATURAL_HINTS.filter(h => h.match.test(text));
  const time = text.match(/\b(\d{1,2})(?::(\d{2}))?\s*(am|pm)\b/i);
  return { tags, proj, hints, time };
};

const SpotlightQuickAdd = ({ projects, defaultProject, onSave, onCancel, accent }) => {
  const [text, setText] = qaS("");
  const [project, setProject] = qaS(defaultProject || "inbox");
  const [showProjects, setShowProjects] = qaS(false);
  const [priority, setPriority] = qaS("medium");
  const [due, setDue] = qaS("today");
  const inputRef = qaR(null);

  qaE(() => { inputRef.current?.focus(); }, []);

  const parsed = parseDraft(text, projects);
  const projectObj = projects.find(p => p.id === project);

  const save = () => {
    if (!text.trim()) return;
    onSave({ title: text.trim(), project, priority, due });
    setText("");
  };

  const onKeyDown = (e) => {
    if (e.key === "Enter") { e.preventDefault(); save(); }
    else if (e.key === "Escape") onCancel();
    else if (e.metaKey && e.key === "p") { e.preventDefault(); setShowProjects(s => !s); }
  };

  return (
    <div className="qa-backdrop" onClick={onCancel}>
      <div className="qa-spotlight" onClick={(e) => e.stopPropagation()}>
        <div className="qa-glass" />
        <div className="qa-input-row">
          <span className="qa-icon" style={{ background: accent }}>
            <Icon name="plus" size={14} color="white" strokeWidth={2.5} />
          </span>
          <input
            ref={inputRef}
            className="qa-input"
            placeholder="Add a task… try #tag, +project, 3pm, @high"
            value={text}
            onChange={(e) => setText(e.target.value)}
            onKeyDown={onKeyDown}
          />
          <span className="qa-hint"><Kbd>↵</Kbd> save</span>
        </div>

        <div className="qa-meta">
          <button className="qa-chip" onClick={() => setShowProjects(s => !s)}>
            <ProjectDot project={projectObj} />
            <span>{projectObj.name}</span>
            <Kbd>⌘P</Kbd>
          </button>
          <button className={"qa-chip" + (due === "today" ? " active" : "")} onClick={() => setDue("today")}>
            <Icon name="clock" size={11} />
            <span>{due === "today" ? "Today" : "Tomorrow"}</span>
          </button>
          <button className="qa-chip" onClick={() => setPriority(priority === "high" ? "medium" : priority === "medium" ? "low" : "high")}>
            <Icon name="flag" size={11} color={window.TaskifyUI.priorityColor(priority)} />
            <span>{priority[0].toUpperCase() + priority.slice(1)} priority</span>
          </button>
          <button className="qa-chip subtle">
            <Icon name="tag" size={11} />
            <span>Tags</span>
          </button>
          <button className="qa-chip subtle">
            <Icon name="paperclip" size={11} />
            <span>Notes</span>
          </button>
          {parsed.hints.map((h, i) => (
            <span key={i} className="qa-chip detected">
              <Icon name={h.icon} size={11} color={h.color} />
              <span>{h.chip}</span>
            </span>
          ))}
        </div>

        {showProjects && (
          <div className="qa-projlist">
            {projects.map(p => (
              <button key={p.id} className="qa-projitem" onClick={() => { setProject(p.id); setShowProjects(false); }}>
                <ProjectDot project={p} />
                <span>{p.name}</span>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

const FloatingQuickAdd = ({ projects, defaultProject, onSave, onCancel, accent, anchorRight }) => {
  const [text, setText] = qaS("");
  const [project, setProject] = qaS(defaultProject || "inbox");
  const inputRef = qaR(null);
  qaE(() => { inputRef.current?.focus(); }, []);

  const projectObj = projects.find(p => p.id === project);
  const save = () => { if (text.trim()) onSave({ title: text.trim(), project, priority: "medium", due: "today" }); setText(""); };
  return (
    <div className="qa-backdrop subtle" onClick={onCancel}>
      <div className="qa-floating" style={{ right: anchorRight }} onClick={(e) => e.stopPropagation()}>
        <div className="qa-glass" />
        <div className="qa-input-row tight">
          <span className="qa-icon small" style={{ background: accent }}>
            <Icon name="plus" size={12} color="white" strokeWidth={2.5} />
          </span>
          <input
            ref={inputRef}
            className="qa-input small"
            placeholder="New task…"
            value={text}
            onChange={(e) => setText(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter") save();
              else if (e.key === "Escape") onCancel();
            }}
          />
        </div>
        <div className="qa-meta tight">
          <span className="qa-chip">
            <ProjectDot project={projectObj} />
            <span>{projectObj.name}</span>
          </span>
          <span className="qa-chip">
            <Icon name="clock" size={11} /> Today
          </span>
          <span className="qa-hint right"><Kbd>↵</Kbd></span>
        </div>
      </div>
    </div>
  );
};

const InlineQuickAdd = ({ projects, defaultProject, onSave, onCancel, accent }) => {
  const [text, setText] = qaS("");
  const inputRef = qaR(null);
  qaE(() => { inputRef.current?.focus(); }, []);
  const projectObj = projects.find(p => p.id === (defaultProject || "inbox"));
  return (
    <div className="qa-inline">
      <span className="qa-icon small" style={{ background: accent }}>
        <Icon name="plus" size={12} color="white" strokeWidth={2.5} />
      </span>
      <input
        ref={inputRef}
        className="qa-input small"
        placeholder="Add a task to Inbox…"
        value={text}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter") { onSave({ title: text.trim(), project: defaultProject || "inbox", priority: "medium", due: "today" }); setText(""); }
          else if (e.key === "Escape") onCancel();
        }}
      />
      <span className="qa-chip">
        <ProjectDot project={projectObj} />
        <span>{projectObj.name}</span>
      </span>
    </div>
  );
};

window.QuickAdd = { SpotlightQuickAdd, FloatingQuickAdd, InlineQuickAdd };