// widgets.jsx — Fahrplan / Störungen / Karte tabbed widget. Tailwind utilities.

function FahrplanWidget({mode = 'fahrplan'}) {
  return (
    <div className="bg-white rounded-[22px] w-full overflow-hidden"
      style={{boxShadow: '0 24px 60px rgba(15, 22, 35, 0.18), 0 4px 12px rgba(15, 22, 35, 0.08)'}}>
      {/* Tabs */}
      <div className="grid grid-cols-3 border-b border-solid border-line">
        {[
          {id: 'fahrplan', label: 'Fahrplan', icon: <I.Search/>},
          {id: 'stoerungen', label: 'Störungen', icon: <I.Alert/>},
          {id: 'karte', label: 'Karte', icon: <I.Map/>},
        ].map(t => (
          <button key={t.id} className="px-3 py-[18px] bg-transparent border-0 font-display font-semibold text-[15px] inline-flex items-center justify-center gap-2 relative" style={{
            borderBottom: mode === t.id ? '3px solid var(--brand-orange)' : '3px solid transparent',
            color: mode === t.id ? 'var(--brand-orange-dark)' : 'var(--gray-600)',
          }}>
          {t.icon} {t.label}
          </button>
        ))}
      </div>

      {/* Body */}
      <div className="p-6">
        {mode === 'fahrplan' && <FahrplanForm/>}
        {mode === 'stoerungen' && <StoerungenInline/>}
        {mode === 'karte' && <KartePreview/>}
      </div>
    </div>
  );
}

function FahrplanForm() {
  return (
    <div>
      <h3 className="font-display font-bold text-xl mb-[18px] flex items-center gap-2.5">
        <span className="text-brand-orange"><I.Bus/></span> Fahrplan suchen
      </h3>

      {/* Von */}
      <Field label="Von" placeholder="Abfahrtsort eingeben" icon={<I.Pin/>} value="Altdorf, Bahnhof"/>

      {/* Swap button */}
      <div className="flex justify-center -my-1.5">
        <button className="w-9 h-9 rounded-full border border-solid border-line bg-bg text-brand-orange-dark inline-flex items-center justify-center cursor-pointer"><I.Swap/></button>
      </div>

      {/* Nach */}
      <Field label="Nach" placeholder="Zielort eingeben" icon={<I.Pin/>} value="Andermatt, Bahnhof"/>

      {/* Date + Time row */}
      <div className="grid grid-cols-2 gap-3 mt-3.5">
        <Field label="Datum" icon={<I.Calendar/>} value="Mi, 22. Mai 2026" small/>
        <Field label="Zeit" icon={<I.Clock/>} value="13:10" small/>
      </div>

      {/* Quick chips */}
      <div className="flex gap-2 mt-3.5 flex-wrap">
        {['Jetzt', 'Abfahrt', 'Ankunft'].map((c,i) => (
          <button key={c} className="px-3.5 py-2 rounded-full border border-solid border-line font-semibold text-[13px] font-display cursor-pointer" style={{
            background: i === 0 ? 'var(--brand-orange-tint)' : 'white',
            color: i === 0 ? 'var(--brand-orange-dark)' : 'var(--gray-600)',
          }}>{c}</button>
        ))}
      </div>

      <button className="btn btn-primary w-full justify-center mt-[18px] text-base">
        <I.Search/> Verbindung suchen
      </button>
    </div>
  );
}

function Field({label, placeholder, icon, value, small}) {
  return (
    <div className="mt-3">
      <label className="block text-xs font-semibold text-gray-600 mb-1.5 font-body uppercase">{label}</label>
      <div className={`flex items-center gap-2.5 bg-bg rounded-[12px] border border-solid border-transparent ${small ? 'px-3 py-2.5' : 'p-3.5'}`}>
        <span className="text-gray-500">{icon}</span>
        <span className="font-display" style={{
          fontWeight: value ? 600 : 400,
          color: value ? 'var(--gray-900)' : 'var(--gray-500)',
          fontSize: small ? 14 : 15,
        }}>{value || placeholder}</span>
      </div>
    </div>
  );
}

function StoerungenInline() {
  const items = [
    {line: '402', from: 'Flüelen', to: 'Andermatt', text: 'Verspätungen wegen Baustelle bei Wassen.', sev: 'warn'},
    {line: '108', from: 'Altdorf', to: 'Bürglen', text: 'Umleitung Schulhausstrasse bis 24.05.', sev: 'info'},
  ];
  return (
    <div>
      <h3 className="font-display font-bold text-xl mb-3.5 flex items-center gap-2.5">
        <span className="text-danger"><I.Alert/></span> Aktuelle Störungen
      </h3>
      <div className="flex flex-col gap-3">
        {items.map((it, i) => (
          <div key={i} className="flex gap-3.5 p-3.5 bg-bg rounded-[12px] border-l-4 border-solid" style={{
            borderLeftColor: it.sev === 'warn' ? 'var(--warning)' : 'var(--info)',
          }}>
            <span className="min-w-[44px] h-11 rounded-[10px] text-white font-display font-bold text-base inline-flex items-center justify-center" style={{
              background: it.sev === 'warn' ? 'var(--warning)' : 'var(--info)',
            }}>{it.line}</span>
            <div>
              <div className="font-display font-bold text-sm">
                {it.from} → {it.to}
              </div>
              <div className="text-[13px] text-gray-600 mt-0.5">{it.text}</div>
            </div>
          </div>
        ))}
      </div>
      <a href="#" className="link-arrow mt-4 inline-flex">
        Alle Störungen <I.Arrow/>
      </a>
    </div>
  );
}

function KartePreview() {
  return (
    <div>
      <h3 className="font-display font-bold text-xl mb-3.5 flex items-center gap-2.5">
        <span className="text-brand-orange"><I.Map/></span> Liniennetz
      </h3>
      <div className="relative h-60 rounded-[12px] overflow-hidden" style={{background: 'linear-gradient(180deg, #e9eef2 0%, #d6e0e8 100%)'}}>
        {/* fake roads */}
        <svg viewBox="0 0 300 240" width="100%" height="100%" className="absolute inset-0">
          <path d="M20 200 Q80 140 120 130 T240 80 L290 60" stroke="#F39200" strokeWidth="3" fill="none"/>
          <path d="M40 40 Q90 90 140 100 T260 180" stroke="#1B2538" strokeWidth="2" fill="none" strokeDasharray="4 4"/>
          {[[40,40],[120,130],[180,110],[240,80],[290,60],[140,100],[210,150],[260,180]].map(([x,y],i)=>(
            <circle key={i} cx={x} cy={y} r="4" fill="white" stroke="#1B2538" strokeWidth="1.5"/>
          ))}
        </svg>
        <div className="absolute bottom-2 right-2 bg-white px-2.5 py-1 rounded-[8px] text-[11px] text-gray-600 font-mono">
          [map preview]
        </div>
      </div>
      <button className="btn btn-primary w-full justify-center mt-3.5">
        <I.Map/> Karte öffnen
      </button>
    </div>
  );
}

Object.assign(window, { FahrplanWidget, FahrplanForm, StoerungenInline, KartePreview });