/* Pharmacy — chain operations. Click a location to see its alerts + restock. */

const pharmTheme = {
  bg:    "#111110",
  card:  "#171715",
  cardHi:"#1f1c19",
  line:  "#242420",
  ink:   "#f0ece4",
  ink2:  "#a8a49b",
  ink3:  "#6b6862",
  ink4:  "#4a4842",
  amber: "#d99350",
  green: "#6aa37d",
  red:   "#d35a4a",
  blue:  "#6c8db6",
};

const PHARM_LOCATIONS = [
  { id: "CASA-12", city: "Casablanca",  zone: "Maârif",    stockouts: 3, expiry: 2, status: "alert",
    items: [
      { name: "Amoxicillin 500mg",     left: 0,   par: 60,  flag: "stockout" },
      { name: "Salbutamol inhaler",    left: 2,   par: 18,  flag: "low"      },
      { name: "Metformin 850mg",        left: 0,   par: 90,  flag: "stockout" },
      { name: "Paracetamol 1g",         left: 14,  par: 220, flag: "low"      },
      { name: "Insulin glargine pen",   left: 4,   par: 12,  flag: "expiry", note: "2 expire 21 May" },
    ],
    restock: "Transfer 40 boxes Amoxicillin from CASA-04. Order 90 Metformin from central. Today.",
  },
  { id: "RABA-05", city: "Rabat",       zone: "Agdal",     stockouts: 1, expiry: 4, status: "alert",
    items: [
      { name: "Atorvastatin 20mg",       left: 0,   par: 50,  flag: "stockout" },
      { name: "Salbutamol inhaler",      left: 5,   par: 18,  flag: "low"      },
      { name: "Ibuprofen 400mg",          left: 60,  par: 180, flag: "low"      },
      { name: "Doxycycline 100mg",        left: 8,   par: 30,  flag: "expiry", note: "4 expire 22 May" },
    ],
    restock: "Order 50 boxes Atorvastatin. Pull 4 Doxycycline before 22 May.",
  },
  { id: "MARR-08", city: "Marrakech",   zone: "Guéliz",    stockouts: 0, expiry: 3, status: "watch",
    items: [
      { name: "Levothyroxine 50µg",     left: 22, par: 60, flag: "low"    },
      { name: "Amlodipine 10mg",          left: 18, par: 48, flag: "low"    },
      { name: "Cefuroxime 500mg",         left: 6,  par: 24, flag: "expiry", note: "3 expire 24 May" },
    ],
    restock: "Transfer 3 Cefuroxime to MARR-12 before expiry. Top-up Levothyroxine routine.",
  },
  { id: "FES-03",  city: "Fès",          zone: "Centre",    stockouts: 2, expiry: 1, status: "alert",
    items: [
      { name: "Omeprazole 20mg",          left: 0,   par: 80,  flag: "stockout" },
      { name: "Ramipril 5mg",              left: 0,   par: 60,  flag: "stockout" },
      { name: "Paracetamol 1g",           left: 80,  par: 220, flag: "low"      },
      { name: "Doxycycline 100mg",         left: 12,  par: 36,  flag: "expiry", note: "1 expires 22 May" },
    ],
    restock: "Order 80 Omeprazole, 60 Ramipril from central. Reservation set.",
  },
  { id: "TANG-09", city: "Tanger",       zone: "Marina",    stockouts: 1, expiry: 5, status: "alert",
    items: [
      { name: "Atorvastatin 20mg",        left: 0,   par: 50,  flag: "stockout" },
      { name: "Insulin glargine pen",     left: 6,   par: 14,  flag: "expiry", note: "5 expire 23 May" },
    ],
    restock: "Atorvastatin urgent — transfer 25 from TANG-04. Move 5 Insulin to TANG-04 before expiry.",
  },
  { id: "AGAD-04", city: "Agadir",       zone: "Talborjt",  stockouts: 0, expiry: 2, status: "watch",
    items: [
      { name: "Salbutamol inhaler",       left: 8,   par: 18,  flag: "low"    },
      { name: "Levothyroxine 50µg",       left: 14,  par: 36,  flag: "expiry", note: "2 expire 25 May" },
    ],
    restock: "Pull 2 Levothyroxine before 25 May. Routine top-up otherwise.",
  },
  { id: "OUJD-02", city: "Oujda",        zone: "Centre",     stockouts: 1, expiry: 0, status: "watch",
    items: [
      { name: "Metformin 850mg",           left: 0,   par: 90,  flag: "stockout" },
      { name: "Amlodipine 10mg",            left: 30,  par: 48,  flag: "ok"       },
    ],
    restock: "Order 90 Metformin from central. ETA 24 hours.",
  },
  { id: "TET-01",  city: "Tétouan",      zone: "Centre",     stockouts: 0, expiry: 2, status: "watch",
    items: [
      { name: "Doxycycline 100mg",         left: 9,   par: 30,  flag: "expiry", note: "2 expire 23 May" },
      { name: "Paracetamol 1g",            left: 140, par: 220, flag: "ok"       },
    ],
    restock: "Pull 2 Doxycycline before 23 May.",
  },
];

function FlagPill({ flag }) {
  const map = {
    stockout: ["rgba(211,90,74,0.15)",  pharmTheme.red,   "stock-out"],
    low:      ["rgba(217,147,80,0.15)", pharmTheme.amber, "low"      ],
    expiry:   ["rgba(108,141,182,0.15)", pharmTheme.blue,  "expiring" ],
    ok:       ["rgba(106,163,125,0.12)", pharmTheme.green, "ok"        ],
  };
  const [bg, fg, label] = map[flag];
  return (
    <span style={{
      fontSize: 10.5, padding: "2px 8px",
      background: bg, color: fg,
      borderRadius: 3, fontWeight: 600,
      letterSpacing: "0.04em", textTransform: "uppercase",
    }}>{label}</span>
  );
}

function PharmacyPreview() {
  const [selected, setSelected] = React.useState(PHARM_LOCATIONS[0].id);
  const sel = PHARM_LOCATIONS.find(p => p.id === selected) || PHARM_LOCATIONS[0];
  const totalSO = PHARM_LOCATIONS.reduce((a, b) => a + b.stockouts, 0);
  const totalEx = PHARM_LOCATIONS.reduce((a, b) => a + b.expiry, 0);

  return (
    <div style={{
      background: pharmTheme.bg,
      color: pharmTheme.ink,
      borderRadius: 14,
      padding: "26px 30px 28px",
      boxShadow: "0 30px 60px -25px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04)",
      maxWidth: 780,
      fontFamily: '"Inter", sans-serif',
    }}>
      {/* header */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", color: pharmTheme.ink3, textTransform: "uppercase" }}>Chain operations · live</div>
          <div style={{ fontSize: 22, fontWeight: 600, marginTop: 4, letterSpacing: "-0.01em" }}>240 pharmacies · today</div>
        </div>
        <div style={{
          display: "flex",
          background: pharmTheme.card,
          borderRadius: 8,
          padding: "10px 14px",
          gap: 24,
        }}>
          <div>
            <div style={{ fontSize: 10.5, letterSpacing: "0.14em", color: pharmTheme.ink3, textTransform: "uppercase" }}>Stock-outs</div>
            <div style={{ fontSize: 24, fontWeight: 600, color: pharmTheme.red, lineHeight: 1, marginTop: 4, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>{totalSO}</div>
          </div>
          <div style={{ width: 1, background: pharmTheme.line }} />
          <div>
            <div style={{ fontSize: 10.5, letterSpacing: "0.14em", color: pharmTheme.ink3, textTransform: "uppercase" }}>Expiry alerts</div>
            <div style={{ fontSize: 24, fontWeight: 600, color: pharmTheme.amber, lineHeight: 1, marginTop: 4, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>{totalEx}</div>
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.25fr", gap: 18, marginTop: 22 }}>
        {/* location list */}
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.14em", color: pharmTheme.ink3, textTransform: "uppercase", marginBottom: 10, display: "flex", justifyContent: "space-between" }}>
            <span>Locations</span>
            <span style={{ color: pharmTheme.ink4 }}>click to inspect</span>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
            {PHARM_LOCATIONS.map(loc => {
              const active = loc.id === selected;
              return (
                <button key={loc.id} onClick={() => setSelected(loc.id)} style={{
                  textAlign: "left",
                  padding: "10px 12px",
                  background: active ? pharmTheme.cardHi : pharmTheme.card,
                  borderRadius: 6,
                  display: "flex", alignItems: "center", gap: 10,
                  boxShadow: active ? "inset 3px 0 0 " + pharmTheme.amber : "inset 3px 0 0 transparent",
                  cursor: "pointer",
                }}
                onMouseEnter={e => { if (!active) e.currentTarget.style.background = pharmTheme.cardHi; }}
                onMouseLeave={e => { if (!active) e.currentTarget.style.background = pharmTheme.card; }}
                >
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="mono" style={{ fontSize: 11, color: active ? pharmTheme.amber : pharmTheme.ink3 }}>{loc.id}</div>
                    <div style={{ fontSize: 13, marginTop: 2, lineHeight: 1.25 }}>{loc.city} · <span style={{ color: pharmTheme.ink3 }}>{loc.zone}</span></div>
                  </div>
                  <div style={{ display: "flex", gap: 6 }}>
                    {loc.stockouts > 0 && <span style={{ fontSize: 11, fontWeight: 600, color: pharmTheme.red }}>{loc.stockouts}<span style={{ fontWeight: 400, fontSize: 10, color: pharmTheme.ink3 }}>·SO</span></span>}
                    {loc.expiry > 0    && <span style={{ fontSize: 11, fontWeight: 600, color: pharmTheme.amber }}>{loc.expiry}<span style={{ fontWeight: 400, fontSize: 10, color: pharmTheme.ink3 }}>·EX</span></span>}
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* detail */}
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.14em", color: pharmTheme.ink3, textTransform: "uppercase", marginBottom: 10 }}>
            {sel.city} · <span style={{ color: pharmTheme.amber }}>{sel.id}</span>
          </div>
          <div style={{ background: pharmTheme.card, borderRadius: 8, padding: "14px 16px" }}>
            <div style={{ fontSize: 11.5, color: pharmTheme.ink3, marginBottom: 10 }}>Items needing attention</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {sel.items.map((it, i) => (
                <div key={i} style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                  <div style={{ flex: 1, fontSize: 13 }}>{it.name}</div>
                  <FlagPill flag={it.flag} />
                  <div style={{ width: 70, textAlign: "right", fontSize: 11.5, color: pharmTheme.ink3, fontVariantNumeric: "tabular-nums" }}>
                    {it.left} / {it.par}
                  </div>
                </div>
              ))}
            </div>

            <div style={{
              marginTop: 14,
              paddingTop: 12,
              borderTop: "1px solid " + pharmTheme.line,
            }}>
              <div style={{ fontSize: 10.5, letterSpacing: "0.14em", color: pharmTheme.amber, textTransform: "uppercase", marginBottom: 6 }}>Drafted action</div>
              <div style={{ fontSize: 12.5, lineHeight: 1.5, color: pharmTheme.ink2 }}>{sel.restock}</div>

              <div style={{ marginTop: 10, display: "flex", gap: 6 }}>
                <button style={{
                  fontSize: 11, color: "#0a0a0a", fontWeight: 600,
                  background: pharmTheme.amber,
                  padding: "6px 12px", borderRadius: 5,
                }}>Approve</button>
                <button style={{
                  fontSize: 11, color: pharmTheme.ink2,
                  background: "rgba(255,255,255,0.04)",
                  padding: "6px 12px", borderRadius: 5,
                }}>Adjust</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style={{
        marginTop: 18,
        paddingTop: 14,
        borderTop: "1px solid " + pharmTheme.line,
        display: "flex", justifyContent: "space-between", fontSize: 11, color: pharmTheme.ink3,
      }}>
        <span>247 routine top-ups auto-queued · 8 urgent transfers</span>
        <span>Refresh every 5 min from POS</span>
      </div>
    </div>
  );
}

window.PharmacyPreview = PharmacyPreview;