// Floating feedback widget
const { useState: fbUseState } = React;

const FEATURE_OPTIONS = [
  { value: "", label: "What would you like to see next? (optional)" },
  { value: "offer-comparison",    label: "⚖️  Offer Comparison" },
  { value: "hike-calculator",     label: "📈  Hike Calculator" },
  { value: "budget-planner",      label: "🏦  Budget Planner" },
  { value: "equity-rsu",          label: "📊  Equity & RSU Deep Dive" },
  { value: "financial-planning",  label: "🗓️  Financial Planning" },
  { value: "investment-ideas",    label: "💡  Investment Ideas" },
  { value: "city-cost",           label: "🏙️  City Cost Adjust" },
  { value: "counter-offer",       label: "🤝  Counter-offer Builder" },
  { value: "other",               label: "✏️  Something else" },
];

function FeedbackWidget() {
  const [open, setOpen] = fbUseState(false);
  const [message, setMessage] = fbUseState("");
  const [email, setEmail] = fbUseState("");
  const [featureInterest, setFeatureInterest] = fbUseState("");
  const [status, setStatus] = fbUseState("idle"); // idle | loading | done | error

  const handleSubmit = async () => {
    if (!message.trim()) return;
    setStatus("loading");
    try {
      await window.SupabaseClient.submitFeedback({
        message: message.trim(),
        email: email.trim(),
        featureInterest: featureInterest || null,
        context: window.location.href,
      });
      setStatus("done");
      setMessage("");
      setEmail("");
      setFeatureInterest("");
      setTimeout(() => { setOpen(false); setStatus("idle"); }, 2500);
    } catch (e) {
      setStatus("error");
      setTimeout(() => setStatus("idle"), 3000);
    }
  };

  return (
    <>
      {/* Floating button */}
      <button
        className="fb-trigger"
        onClick={() => { setOpen(o => !o); setStatus("idle"); }}
        title="Share feedback"
      >
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M14 1H2a1 1 0 00-1 1v8a1 1 0 001 1h3l3 3 3-3h3a1 1 0 001-1V2a1 1 0 00-1-1z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
        </svg>
        Feedback
      </button>

      {/* Modal */}
      {open && (
        <div className="fb-overlay" onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}>
          <div className="fb-modal">
            <div className="fb-modal__head">
              <div className="fb-modal__title">Share your feedback</div>
              <button className="fb-modal__close" onClick={() => setOpen(false)}>×</button>
            </div>

            {status === "done" ? (
              <div className="fb-modal__done">
                <div className="fb-modal__done-icon">🙏</div>
                <div className="fb-modal__done-text">Thanks! Got it.</div>
                <div className="fb-modal__done-sub">Your feedback helps make myinhand better.</div>
              </div>
            ) : (
              <>
                <textarea
                  className="fb-modal__textarea"
                  placeholder="What's confusing, broken, or missing? Even a one-liner helps."
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  rows={4}
                  autoFocus
                />
                <select
                  className="fb-modal__select"
                  value={featureInterest}
                  onChange={(e) => setFeatureInterest(e.target.value)}
                >
                  {FEATURE_OPTIONS.map(o => (
                    <option key={o.value} value={o.value}>{o.label}</option>
                  ))}
                </select>
                <input
                  className="fb-modal__email"
                  type="email"
                  placeholder="Email (optional — if you want a reply)"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
                {status === "error" && (
                  <div className="fb-modal__error">Something went wrong — try again.</div>
                )}
                <button
                  className="fb-modal__submit"
                  onClick={handleSubmit}
                  disabled={!message.trim() || status === "loading"}
                >
                  {status === "loading" ? "Sending…" : "Send feedback"}
                </button>
              </>
            )}
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { FeedbackWidget });