/* Tab 2: 5 Wireframe Directions for Sef Decision Pad */

function TabWireframes() {
  const [focused, setFocused] = React.useState(null);
  return (
    <div className="px-8 py-10 max-w-7xl mx-auto" style={{ fontFamily: "system-ui, sans-serif" }}>
      <SectionHead
        eyebrow="Pasul 2 · Explorare"
        title="Cinci direcții — de la 2-pane la spreadsheet"
        lead="Pivotul cheie: păstrăm modelul mental „2 panouri” sau acceptăm că șeful gândește în worksheet? Cinci variante, fiecare cu o ipoteză diferită despre cum decide un șef."
      />

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
        {DIRECTIONS.map((d) => (
          <DirectionCard key={d.key} d={d} onClick={() => setFocused(d)} />
        ))}
      </div>

      {focused && <FocusModal d={focused} onClose={() => setFocused(null)} />}

      <div className="mt-10 rounded-lg border border-slate-200 bg-slate-50 p-5 max-w-4xl">
        <p className="text-[13px] text-slate-700 leading-relaxed">
          <span className="font-semibold">Notă metodologică:</span> A1 ne-a spus că șeful folosește azi A3 Excel. Trei direcții (D3, D4, D5) acceptă acest mental model. Două (D1, D2) îl evită pentru a păstra continuitate cu restul aplicației. Matricea de decizie ponderează.
        </p>
      </div>
    </div>
  );
}

function DirectionCard({ d, onClick }) {
  return (
    <div className="rounded-xl border border-slate-200 bg-white overflow-hidden hover:border-slate-400 transition-colors">
      <div className="px-5 pt-4 pb-3 border-b border-slate-100">
        <div className="flex items-baseline gap-2">
          <span className="text-[10px] uppercase tracking-wider text-slate-500 font-mono">{d.key}</span>
          <h3 className="text-base font-semibold text-slate-900">{d.title}</h3>
        </div>
        <p className="text-[12.5px] text-slate-600 mt-1 leading-snug">{d.hypothesis}</p>
      </div>
      <button onClick={onClick}
              className="block w-full bg-gradient-to-b from-amber-50/60 to-white p-4 hover:bg-amber-50/30 cursor-zoom-in">
        <div className="mx-auto" style={{ maxWidth: 280 }}>
          {d.Sketch && <d.Sketch />}
        </div>
      </button>
      <div className="px-5 py-3 border-t border-slate-100 grid grid-cols-2 gap-3 text-[11.5px]">
        <div>
          <p className="text-emerald-700 font-semibold mb-0.5">+ Forța</p>
          <p className="text-slate-700 leading-snug">{d.pro}</p>
        </div>
        <div>
          <p className="text-rose-700 font-semibold mb-0.5">− Riscul</p>
          <p className="text-slate-700 leading-snug">{d.con}</p>
        </div>
      </div>
    </div>
  );
}

function FocusModal({ d, onClose }) {
  return (
    <div className="fixed inset-0 z-50 bg-slate-900/70 backdrop-blur-sm flex items-center justify-center p-8"
         onClick={onClose}>
      <div className="bg-white rounded-2xl max-w-3xl w-full max-h-[90vh] overflow-auto" onClick={(e) => e.stopPropagation()}>
        <div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between sticky top-0 bg-white">
          <div>
            <span className="text-[10px] uppercase tracking-wider text-slate-500 font-mono">{d.key}</span>
            <h3 className="text-lg font-semibold text-slate-900">{d.title}</h3>
          </div>
          <button onClick={onClose} className="rounded p-2 hover:bg-slate-100"><IconX/></button>
        </div>
        <div className="p-8 bg-amber-50/20">
          <div className="mx-auto" style={{ maxWidth: 520 }}>
            {d.Sketch && <d.Sketch large/>}
          </div>
        </div>
        <div className="p-6 border-t border-slate-200 space-y-3">
          <p className="text-[13px] text-slate-700"><span className="font-semibold">Ipoteza:</span> {d.hypothesis}</p>
          <p className="text-[13px] text-slate-700"><span className="font-semibold">Notă din evidence base:</span> {d.evidence}</p>
        </div>
      </div>
    </div>
  );
}

const sketchFrame = (children, ratio = "4 / 3", h = 360) => (
  <div className="rounded-xl border-2 border-slate-700 bg-white p-2.5"
       style={{ aspectRatio: ratio, maxHeight: h, fontFamily: "'Caveat', cursive" }}>
    <div className="border border-slate-300 rounded-md h-full p-2 flex flex-col gap-1.5 overflow-hidden">
      {children}
    </div>
  </div>
);

/* D1: 2-pane refined (current shape, fix bugs) */
function SketchD1({ large }) {
  return sketchFrame(
    <>
      <div className="flex items-center justify-between border-b border-slate-300 pb-1">
        <WHand size="text-[11px]">B-127-LFX · decision pad</WHand>
        <WTag tone="em">salvat acum</WTag>
      </div>
      <div className="flex-1 grid grid-cols-2 gap-1.5">
        <div className="border border-slate-400 rounded p-1 flex flex-col gap-1">
          <WHand size="text-[10px] font-bold">CONSTATĂRI ↓</WHand>
          {[1,2,3].map(i => (
            <div key={i} className="border border-slate-300 rounded p-1 bg-slate-50">
              <WHand size="text-[9px]">#{i} finding · 📷📷</WHand>
              <div className="flex gap-0.5 mt-0.5">
                <WTag tone="pri">🤖 ?</WTag>
              </div>
            </div>
          ))}
        </div>
        <div className="border border-slate-400 rounded p-1 flex flex-col gap-1">
          <WHand size="text-[10px] font-bold">DECIZIE →</WHand>
          {[
            ["Plăcuțe față", "60'", "45€"],
            ["Curea", "240'", "180€"],
          ].map(([n,m,c],i) => (
            <div key={i} className="border border-slate-300 rounded p-1 bg-emerald-50">
              <WHand size="text-[9px]">{n} · {m} · {c}</WHand>
            </div>
          ))}
          <WBtn dashed className="!py-0.5 !text-[9px]">+ catalog ⌕</WBtn>
        </div>
      </div>
      <div className="border-2 border-emerald-500 rounded p-1 bg-emerald-50">
        <WHand size="text-[10px] font-bold">TOTAL: 740.75€</WHand>
      </div>
      <div className="flex justify-between gap-1">
        <WBtn className="!py-1 !text-[9px]">↺ Trimite</WBtn>
        <WBtn primary className="!py-1 !text-[9px]">Confirmă →</WBtn>
      </div>
    </>, "4 / 3", large ? 460 : 280);
}

/* D2: Findings-driven (each finding hosts its operations) */
function SketchD2({ large }) {
  return sketchFrame(
    <>
      <div className="flex items-center justify-between border-b border-slate-300 pb-1">
        <WHand size="text-[11px]">B-127-LFX · decision pad</WHand>
        <WTag tone="em">740.75€</WTag>
      </div>
      {[
        { ord: 1, cat: "Plăcuțe frână", sev: "em", ops: ["Plăcuțe față 45€", "Disc 22€"] },
        { ord: 2, cat: "Curea", sev: "red", ops: ["Kit distribuție 180€"] },
        { ord: 3, cat: "Filtru", sev: null, ops: ["Filtru cabină 11€"] },
      ].map((f, i) => (
        <div key={i} className="border border-slate-400 rounded p-1.5 bg-white">
          <div className="flex items-center justify-between mb-1">
            <WHand size="text-[10px] font-bold">▼ #{f.ord} {f.cat}</WHand>
            {f.sev && <WTag tone={f.sev}>{f.sev==="red"?"critic":"ok"}</WTag>}
          </div>
          <div className="space-y-0.5 pl-2 border-l-2 border-indigo-300">
            {f.ops.map((o, j) => (
              <div key={j} className="text-[9px] font-caveat">› {o}</div>
            ))}
            <WBtn dashed className="!py-0.5 !text-[9px] !px-1">+ op</WBtn>
          </div>
        </div>
      ))}
      <div className="flex justify-between gap-1 mt-auto">
        <WBtn className="!py-1 !text-[9px]">↺ Trimite</WBtn>
        <WBtn primary className="!py-1 !text-[9px]">Confirmă →</WBtn>
      </div>
    </>, "4 / 3", large ? 460 : 280);
}

/* D3: Worksheet/spreadsheet */
function SketchD3({ large }) {
  return sketchFrame(
    <>
      <div className="flex items-center justify-between border-b border-slate-300 pb-1">
        <WHand size="text-[11px]">B-127-LFX · decision pad</WHand>
        <WTag tone="em">salvat</WTag>
      </div>
      <div className="flex gap-1 mb-1">
        {["#1 Plăcuțe","#2 Curea ⚠","#3 Filtru"].map((f,i) => (
          <div key={i} className="flex-1 border border-slate-300 rounded px-1 py-0.5 bg-slate-50">
            <WHand size="text-[8.5px]">{f}</WHand>
          </div>
        ))}
      </div>
      <div className="border-2 border-slate-700 rounded">
        <div className="grid grid-cols-[1.5fr_0.5fr_0.5fr_0.7fr] gap-0 bg-slate-200 text-[8.5px] font-caveat border-b border-slate-700">
          <div className="px-1 py-0.5 border-r border-slate-700">Operație</div>
          <div className="px-1 py-0.5 border-r border-slate-700">min</div>
          <div className="px-1 py-0.5 border-r border-slate-700">cost</div>
          <div className="px-1 py-0.5">finding</div>
        </div>
        {[
          ["Plăcuțe față","60","45€","#1"],
          ["Disc față","30","22€","#1"],
          ["Kit distribuție","240","180€","#2"],
          ["Filtru cabină","15","11€","#3"],
        ].map((r,i) => (
          <div key={i} className="grid grid-cols-[1.5fr_0.5fr_0.5fr_0.7fr] text-[8.5px] font-caveat border-b border-slate-300 last:border-b-0">
            {r.map((c,j) => (
              <div key={j} className={`px-1 py-0.5 ${j<3?"border-r border-slate-300":""}`}>{c}</div>
            ))}
          </div>
        ))}
      </div>
      <WBtn dashed className="!py-0.5 !text-[9px] self-start">+ rând (catalog ⌕)</WBtn>
      <div className="border-2 border-emerald-500 rounded p-1 bg-emerald-50 flex justify-between">
        <WHand size="text-[10px]">345' · 258€ + 482€</WHand>
        <WHand size="text-[10px] font-bold">740€</WHand>
      </div>
      <div className="flex justify-between gap-1">
        <WBtn className="!py-1 !text-[9px]">↺ Trimite</WBtn>
        <WBtn primary className="!py-1 !text-[9px]">Confirmă →</WBtn>
      </div>
    </>, "4 / 3", large ? 460 : 280);
}

/* D4: Wizard / phased */
function SketchD4({ large }) {
  return sketchFrame(
    <>
      <div className="flex items-center gap-1 border-b border-slate-300 pb-1">
        {["1 Review","2 Op","3 Piese","4 Trimite"].map((s,i) => (
          <React.Fragment key={i}>
            <div className={`flex items-center gap-0.5 px-1 py-0.5 rounded ${i===1?"bg-indigo-100":""}`}>
              <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full text-[8.5px] font-bold ${i<=1?"bg-indigo-600 text-white":"bg-slate-200 text-slate-500"}`}>{i+1}</span>
              <WHand size="text-[9px]">{s.split(" ")[1]}</WHand>
            </div>
            {i<3 && <span className="text-slate-300">→</span>}
          </React.Fragment>
        ))}
      </div>
      <WHand size="text-[12px] font-bold">Pasul 2 · Operații</WHand>
      <div className="flex-1 border border-slate-400 rounded p-1.5 bg-slate-50 space-y-1">
        <WHand size="text-[10px]">Suggested by mecanic:</WHand>
        {[
          ["✓ Plăcuțe front","60'"],
          ["✓ Disc CHK","30'"],
          ["⏵ Curea kit","240'"],
        ].map(([n,m],i) => (
          <div key={i} className="flex justify-between border border-slate-300 rounded px-1 py-0.5 bg-white">
            <WHand size="text-[9px]">{n}</WHand>
            <WHand size="text-[9px]">{m}</WHand>
          </div>
        ))}
        <WBtn dashed className="!py-0.5 !text-[9px]">+ adaugă din catalog</WBtn>
      </div>
      <div className="flex justify-between gap-1">
        <WBtn className="!py-1 !text-[9px]">← Pas 1</WBtn>
        <WBtn primary className="!py-1 !text-[9px]">Pas 3 →</WBtn>
      </div>
    </>, "4 / 3", large ? 460 : 280);
}

/* D5: Mirror review (mecanic | sef side-by-side) */
function SketchD5({ large }) {
  return sketchFrame(
    <>
      <div className="flex items-center justify-between border-b border-slate-300 pb-1">
        <WHand size="text-[11px]">B-127-LFX · decision pad</WHand>
        <WTag tone="em">740€</WTag>
      </div>
      <div className="grid grid-cols-2 gap-1 flex-1">
        <div className="border-2 border-amber-400 rounded bg-amber-50/40 p-1 flex flex-col gap-1">
          <WHand size="text-[9px] font-bold">MECANIC</WHand>
          {["#1 Plăcuțe 📷📷","#2 Curea ⚠","#3 Filtru"].map((s,i) => (
            <div key={i} className="border border-amber-300 rounded p-1 bg-white text-[8.5px] font-caveat">
              {s}
            </div>
          ))}
          <WHand size="text-[8.5px]">3 findings · 1h12m</WHand>
        </div>
        <div className="border-2 border-emerald-400 rounded bg-emerald-50/40 p-1 flex flex-col gap-1">
          <WHand size="text-[9px] font-bold">ȘEF</WHand>
          {["Plăcuțe 45€","Disc 22€","Kit 180€","Filtru 11€"].map((s,i) => (
            <div key={i} className="border border-emerald-300 rounded p-1 bg-white text-[8.5px] font-caveat">
              {s}
            </div>
          ))}
          <WHand size="text-[8.5px]">4 op · 345'</WHand>
        </div>
      </div>
      <div className="flex justify-between gap-1">
        <WBtn className="!py-1 !text-[9px]">↺ Cere clarificare</WBtn>
        <WBtn primary className="!py-1 !text-[9px]">Confirmă →</WBtn>
      </div>
    </>, "4 / 3", large ? 460 : 280);
}

const DIRECTIONS = [
  {
    key: "D1", title: "2-pane refinat",
    hypothesis: "Păstrăm forma actuală (findings stânga, decizie dreapta) dar reparăm cele 12 abateri: autocomplete catalog, costuri vizibile, auto-save, totaluri.",
    pro: "Risc minim · cea mai compatibilă cu codul existent · sef nu reînvață nimic.",
    con: "Modelul „form” rămâne — sef gândește în worksheet, nu în formular.",
    evidence: "Refactor incremental; respectă code-base existent. Bun fallback.",
    Sketch: SketchD1,
  },
  {
    key: "D2", title: "Findings-driven",
    hypothesis: "Fiecare finding e un container care își are operațiunile și piesele inline. Lista de findings = lista de decizii.",
    pro: "Cuplaj 1:1 finding ↔ decizie · imposibil să uiți un finding · model mental clar.",
    con: "Operații cross-finding (ex. inspecție generală) nu au unde să stea.",
    evidence: "04_FLOWS: linkul finding ↔ operație e deja modelat în BE — UI-ul nu reflectă asta.",
    Sketch: SketchD2,
  },
  {
    key: "D3", title: "Worksheet spreadsheet",
    hypothesis: "Tabel ca în Excel: operații pe rânduri, coloane min/cost/finding-link, totaluri jos. Findings într-o bandă deasupra.",
    pro: "Mental model identic cu Excel-ul A1 · totaluri vizibile permanent · familie sef.",
    con: "Pe tablet portrait se sparge — coloanele cer lățime.",
    evidence: "A1 quote: „manual A3 spreadsheet today”. Direct match cu obiceiul existent.",
    Sketch: SketchD3,
  },
  {
    key: "D4", title: "Wizard pe 4 pași",
    hypothesis: "1) Review findings → 2) Pick operații → 3) Pick piese → 4) Confirm. Liniar, gated. Fiecare pas blochează până validat.",
    pro: "Imposibil să sari un pas · ghidaj puternic · bun pentru ucenici.",
    con: "Sef cu experiență resimte friction — vrea toate datele vizibile odată.",
    evidence: "Persona 03 Sef: „authoritative, decisive” — un wizard infantilizează.",
    Sketch: SketchD4,
  },
  {
    key: "D5", title: "Mirror review (split)",
    hypothesis: "Două coloane vizuale paralele: stânga ce a capturat mecanicul, dreapta ce decide șeful. Permite review side-by-side ca-n diff.",
    pro: "Comparație directă mecanic ↔ sef · evident dacă lipsește ceva.",
    con: "Pe tablet se sparge la 2 coloane înguste · spațiu vertical limitat.",
    evidence: "Sef face în esență un review — modelul „diff” e familiar din PR-uri/contabilitate.",
    Sketch: SketchD5,
  },
];

window.TabWireframes = TabWireframes;