// STEP 1 — Enter Topic
const { useState: useState1 } = React;

function Step1Topic({ initial, onSubmit, error, loading }) {
  const [topic, setTopic] = useState1(initial?.topic || "");
  const [geography, setGeography] = useState1(initial?.geography || "Global");
  const [period, setPeriod] = useState1(initial?.period || "2024–2030");
  const [depth, setDepth] = useState1(initial?.depth || "Detailed");
  const [adv, setAdv] = useState1(false);

  const examples = [
    "Global Electric Vehicle Battery Market",
    "AI in Healthcare Diagnostics",
    "Asia-Pacific Semiconductor Supply Chain",
    "Plant-Based Food & Beverage Industry",
  ];

  return (
    <div className="max-w-3xl mx-auto px-8 pb-16 fade-up">
      <div className="text-center mb-6">
        <div className="mono text-[11px] uppercase tracking-[0.18em] text-teal-700 mb-2">Step 01 / Topic</div>
        <h1 className="text-[28px] font-semibold tracking-tight text-ink-900">What market do you want to research?</h1>
        <p className="text-[14px] text-ink-500 mt-1.5 max-w-xl mx-auto">
          Describe the industry, segment, or technology. We'll propose titles, structure a table of contents, and generate the full report.
        </p>
      </div>

      <div className="bg-white border border-ink-100 rounded-xl shadow-card overflow-hidden">
        {/* Main textarea */}
        <div className="p-5">
          <label className="mono text-[10px] uppercase tracking-wider text-ink-500 flex items-center gap-1.5">
            <Icons.Sparkles size={11} className="text-teal-600"/> Topic
          </label>
          <textarea
            value={topic}
            onChange={(e) => setTopic(e.target.value)}
            disabled={loading}
            placeholder="e.g. Global Electric Vehicle Battery Market — focus on solid-state chemistry, top OEMs, and forecast through 2030."
            className="w-full mt-2 resize-none text-[16px] leading-relaxed bg-transparent placeholder:text-ink-300 text-ink-900 focus:outline-none"
            rows={4}/>

          {/* Example chips */}
          <div className="mt-2 flex flex-wrap items-center gap-1.5">
            <span className="mono text-[10px] uppercase tracking-wider text-ink-400 mr-1">Try</span>
            {examples.map((ex) => (
              <button
                key={ex}
                onClick={() => setTopic(ex)}
                className="h-6 px-2 rounded-full text-[11.5px] bg-ink-50 hover:bg-teal-50 hover:text-teal-700 text-ink-600 border border-ink-100 transition-colors">
                {ex}
              </button>
            ))}
          </div>
        </div>

        {/* Advanced options */}
        <button
          onClick={() => setAdv((v) => !v)}
          className="w-full px-5 py-2.5 flex items-center justify-between border-t border-ink-100 text-[12.5px] text-ink-600 hover:bg-ink-50 transition-colors">
          <span className="inline-flex items-center gap-2 font-medium">
            <Icons.Settings size={13}/> Advanced options
          </span>
          <Icons.ChevronDown size={14} className={`transition-transform ${adv ? "rotate-180" : ""}`}/>
        </button>

        {adv && (
          <div className="px-5 py-4 grid grid-cols-3 gap-4 border-t border-ink-100 bg-ink-50/40 fade-up">
            <Field icon={<Icons.Globe size={13}/>} label="Geography / Region">
              <select value={geography} onChange={(e) => setGeography(e.target.value)} className="w-full h-9 bg-white border border-ink-200 rounded-md px-2.5 text-[13px] focus:outline-none focus:ring-2 focus:ring-teal-500/30 focus:border-teal-500">
                {["Global", "North America", "Europe", "Asia-Pacific", "Latin America", "Middle East & Africa"].map(x => <option key={x}>{x}</option>)}
              </select>
            </Field>
            <Field icon={<Icons.Calendar size={13}/>} label="Time period">
              <select value={period} onChange={(e) => setPeriod(e.target.value)} className="w-full h-9 bg-white border border-ink-200 rounded-md px-2.5 text-[13px] focus:outline-none focus:ring-2 focus:ring-teal-500/30 focus:border-teal-500">
                {["2024–2028", "2024–2030", "2024–2032", "2024–2035"].map(x => <option key={x}>{x}</option>)}
              </select>
            </Field>
            <Field icon={<Icons.Layers size={13}/>} label="Report depth">
              <div className="grid grid-cols-3 gap-1 bg-white border border-ink-200 rounded-md p-0.5">
                {["Standard", "Detailed", "Comprehensive"].map((d) => (
                  <button key={d} onClick={() => setDepth(d)} className={`h-8 text-[11.5px] font-medium rounded transition-colors ${depth === d ? "bg-teal-500 text-white" : "text-ink-600 hover:bg-ink-50"}`}>
                    {d}
                  </button>
                ))}
              </div>
            </Field>
          </div>
        )}
      </div>

      {error && (
        <div className="mt-3 px-3 py-2.5 rounded-md bg-red-50 border border-red-200 text-[12.5px] text-red-700 flex items-start gap-2">
          <Icons.CircleAlert size={14} className="mt-0.5 shrink-0"/>
          <div className="flex-1">{error}</div>
          <button onClick={() => onSubmit({ topic, geography, period, depth })} className="text-red-700 underline underline-offset-2 font-medium">Retry</button>
        </div>
      )}

      {/* CTA */}
      <div className="mt-5 flex items-center justify-between">
        <div className="text-[12px] text-ink-400 inline-flex items-center gap-1.5">
          <Icons.Clock size={13}/> Title suggestions usually take <span className="mono text-ink-600">~3 sec</span>
        </div>
        <button
          disabled={!topic.trim() || loading}
          onClick={() => onSubmit({ topic, geography, period, depth })}
          className="h-11 px-5 inline-flex items-center gap-2 bg-teal-500 hover:bg-teal-600 disabled:bg-ink-200 disabled:text-ink-400 text-white text-[13.5px] font-medium rounded-lg shadow-sm transition-colors">
          {loading ? (
            <>
              <Icons.Loader size={15} className="spin-slow"/>
              Researching topic…
            </>
          ) : (
            <>
              <Icons.Sparkles size={15}/>
              Generate Title Suggestions
              <Icons.ArrowRight size={15}/>
            </>
          )}
        </button>
      </div>

      {/* Loading skeleton preview */}
      {loading && (
        <div className="mt-8 fade-up">
          <div className="mono text-[10px] uppercase tracking-wider text-ink-400 mb-2">Drafting candidate titles…</div>
          <div className="space-y-2">
            {[0, 1, 2].map((i) => (
              <div key={i} className="bg-white border border-ink-100 rounded-lg p-4">
                <div className="shimmer h-3.5 w-3/4 rounded mb-2" style={{ animationDelay: `${i * 0.1}s` }}/>
                <div className="shimmer h-2.5 w-full rounded mt-3 opacity-70"/>
                <div className="shimmer h-2.5 w-5/6 rounded mt-2 opacity-70"/>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function Field({ label, icon, children }) {
  return (
    <div>
      <label className="mono text-[10px] uppercase tracking-wider text-ink-500 flex items-center gap-1.5 mb-1.5">
        {icon} {label}
      </label>
      {children}
    </div>
  );
}

window.Step1Topic = Step1Topic;