import { useEffect, useRef, useState } from "react";
import { X } from "lucide-react";
import "./TopicSelector.css";
import { DEFAULT_NEWS_TIMEFRAME, NEWS_TIMEFRAMES } from "../constants/timeframes.js";

const SUGGESTIONS = [
  "Russia–Ukraine war",
  "Israel–Gaza conflict",
  "Sahel coups",
  "South China Sea disputes",
  "Climate negotiations at COP",
  "Migration across the Mediterranean",
];

export default function TopicSelector({ initialQuery, onSubmit, onCancel }) {
  const [topic, setTopic] = useState(initialQuery?.topic ?? "");
  const [newsTimeframe, setNewsTimeframe] = useState(
    initialQuery?.newsTimeframe ?? DEFAULT_NEWS_TIMEFRAME
  );
  const inputRef = useRef(null);

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

  useEffect(() => {
    setTopic(initialQuery?.topic ?? "");
    setNewsTimeframe(initialQuery?.newsTimeframe ?? DEFAULT_NEWS_TIMEFRAME);
  }, [initialQuery]);

  useEffect(() => {
    function onKey(e) {
      if (e.key === "Escape" && onCancel) onCancel();
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onCancel]);

  const canSubmit = topic.trim().length > 0;

  function submit(e) {
    e?.preventDefault();
    if (!canSubmit) return;
    onSubmit({
      topic: topic.trim(),
      newsTimeframe,
    });
  }

  return (
    <div className="modal" role="dialog" aria-modal="true" aria-label="Define a topic">
      <div className="modal__backdrop" onClick={onCancel} />
      <form className="modal__panel" onSubmit={submit}>
        <header className="modal__header">
          <div>
            <div className="label">Define a topic</div>
            <h2 className="modal__title">Open an investigation</h2>
          </div>
          {onCancel && (
            <button
              type="button"
              className="ghost modal__close"
              aria-label="Close"
              onClick={onCancel}
            >
              <X size={16} strokeWidth={1.5} />
            </button>
          )}
        </header>

        <div className="modal__body">
          <label className="field">
            <span className="label">Topic / query</span>
            <input
              ref={inputRef}
              type="text"
              value={topic}
              onChange={(e) => setTopic(e.target.value)}
              placeholder="e.g. Russia–Ukraine war, Gaza ceasefire negotiations…"
            />
          </label>

          <label className="field">
            <span className="label">News timeframe</span>
            <select
              value={newsTimeframe}
              onChange={(e) => setNewsTimeframe(e.target.value)}
            >
              {NEWS_TIMEFRAMES.map((item) => (
                <option key={item.value} value={item.value}>
                  {item.label}
                </option>
              ))}
            </select>
          </label>

          <div className="suggestions">
            <div className="label">Suggested investigations</div>
            <div className="suggestions__chips">
              {SUGGESTIONS.map((s) => (
                <button
                  key={s}
                  type="button"
                  className="chip"
                  onClick={() => setTopic(s)}
                >
                  {s}
                </button>
              ))}
            </div>
          </div>
        </div>

        <footer className="modal__footer">
          <p className="modal__hint">
            FrameVis will compile coverage from international wires, national
            press, and partisan outlets — then surface where their narratives
            diverge.
          </p>
          <div className="modal__actions">
            {onCancel && (
              <button type="button" onClick={onCancel}>
                Cancel
              </button>
            )}
            <button type="submit" className="primary" disabled={!canSubmit}>
              Open investigation
            </button>
          </div>
        </footer>
      </form>
    </div>
  );
}