// Hand-styled, schematic doc previews. Not photoreal; readable + concrete.
// Sized to fit a ~280x360 frame (or scaled).

const DocLineup = ({ kind = "lab", scribbled = true }) => {
  // Generate a few "scribbled" lines for handwritten look.
  const ScribLines = ({ n = 6, widths = [78, 62, 88, 54, 70, 60], offset = 0 }) =>
    Array.from({ length: n }).map((_, i) => (
      <div key={i} style={{
        height: 6,
        width: widths[(i + offset) % widths.length] + "%",
        background: "rgba(12,20,16,0.55)",
        borderRadius: 2,
        transform: `rotate(${(i % 3 - 1) * 0.4}deg) translateX(${(i % 2) * 4}px)`,
        opacity: 0.55,
      }} />
    ));

  const PrintLines = ({ n = 5, widths = [82, 64, 90, 50, 76] }) =>
    Array.from({ length: n }).map((_, i) => (
      <div key={i} style={{
        height: 5,
        width: widths[i % widths.length] + "%",
        background: "rgba(12,20,16,0.7)",
        borderRadius: 1,
      }} />
    ));

  const FieldBox = ({ label, value, w = "100%", hand = false }) => (
    <div style={{ flex: w === "100%" ? 1 : `0 0 ${w}`, display: "flex", flexDirection: "column", gap: 4 }}>
      <div style={{ fontSize: 7.5, letterSpacing: "0.06em", textTransform: "uppercase", color: "#6b7570", fontWeight: 600 }}>{label}</div>
      <div style={{ height: 22, borderBottom: "1px solid #c9ccc9", display: "flex", alignItems: "flex-end", paddingBottom: 2 }}>
        <span style={{
          fontFamily: hand ? "'Caveat', 'Bradley Hand', cursive" : "Inter, sans-serif",
          fontSize: hand ? 16 : 11,
          color: "#0c1410",
          fontWeight: hand ? 500 : 500,
          transform: hand ? `rotate(${Math.random() * 1.6 - 0.8}deg)` : "none",
        }}>{value}</span>
      </div>
    </div>
  );

  const wrap = {
    width: "100%", height: "100%", padding: "16px 18px",
    display: "flex", flexDirection: "column", gap: 10,
    fontSize: 10, color: "#0c1410", position: "relative", overflow: "hidden",
  };

  if (kind === "lab") {
    return (
      <div className="paper" style={wrap}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <div style={{ fontWeight: 700, fontSize: 11, letterSpacing: "0.04em" }}>NORTHSHORE LABS</div>
            <div style={{ fontSize: 8, color: "#6b7570" }}>Lab Requisition · Form L-2</div>
          </div>
          <div style={{ width: 30, height: 30, border: "1px solid #0c1410", display: "grid", placeItems: "center", fontSize: 7, color: "#6b7570" }}>BC</div>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <FieldBox label="Patient" value="Maria Alvarez" hand />
          <FieldBox label="DOB" value="4/12/78" hand w="40%" />
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <FieldBox label="MRN" value="458-22-1109" hand w="50%" />
          <FieldBox label="Sex" value="F" hand w="20%" />
          <FieldBox label="Fasting" value="Y" hand w="25%" />
        </div>
        <div style={{ fontSize: 7.5, letterSpacing: "0.06em", textTransform: "uppercase", color: "#6b7570", fontWeight: 600, marginTop: 4 }}>Tests Ordered</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
          {["CBC", "CMP", "TSH", "Lipid", "A1C"].map((t, i) => (
            <div key={t} style={{
              padding: "2px 6px", border: "1px solid #c9ccc9",
              fontFamily: "'Caveat', cursive", fontSize: 14,
              background: i < 3 ? "rgba(12,20,16,0.04)" : "transparent",
              transform: `rotate(${(i % 2 ? -0.6 : 0.4)}deg)`,
            }}>{i < 3 ? "✓ " : ""}{t}</div>
          ))}
        </div>
        <div style={{ marginTop: "auto", display: "flex", gap: 10 }}>
          <FieldBox label="Physician" value="Dr. M. Patel" hand w="55%" />
          <FieldBox label="NPI" value="1487291023" hand w="40%" />
        </div>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 18, color: "#0c1410", transform: "rotate(-3deg)", marginTop: -6 }}>M.Patel</div>
      </div>
    );
  }

  if (kind === "ref") {
    return (
      <div className="paper" style={wrap}>
        <div style={{ fontSize: 7.5, color: "#6b7570" }}>FAX · 305-555-0188 · Pg 1/3</div>
        <div style={{ fontWeight: 700, fontSize: 11 }}>REFERRAL — Cardiology</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <PrintLines n={4} widths={[88, 66, 78, 54]} />
        </div>
        <div style={{ borderTop: "1px dashed #c9ccc9", paddingTop: 8 }}>
          <div style={{ fontSize: 8, color: "#6b7570", marginBottom: 6 }}>REASON FOR REFERRAL</div>
          <ScribLines n={4} widths={[92, 70, 85, 48]} />
        </div>
        <div style={{ marginTop: "auto", fontSize: 8, color: "#6b7570" }}>Attached: EKG, lipid panel</div>
      </div>
    );
  }

  if (kind === "pa") {
    return (
      <div className="paper" style={wrap}>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <div style={{ fontWeight: 700, fontSize: 10 }}>UHC · PRIOR AUTHORIZATION</div>
          <div style={{ fontSize: 8, color: "#6b7570" }}>Pg 4 / 12</div>
        </div>
        <PrintLines n={3} widths={[80, 60, 88]} />
        <div style={{ display: "flex", gap: 8, marginTop: 4 }}>
          {["Patient", "Member ID", "Rx"].map((l) => (
            <div key={l} style={{ flex: 1, padding: "4px 6px", border: "1px solid #c9ccc9", fontSize: 8 }}>
              <div style={{ color: "#6b7570", fontSize: 7 }}>{l}</div>
              <PrintLines n={1} widths={[80]} />
            </div>
          ))}
        </div>
        <PrintLines n={4} widths={[90, 65, 78, 50]} />
        <div style={{ display: "flex", gap: 6, alignItems: "center", padding: "5px 8px", background: "#fef3c7", border: "1px solid #fde68a", marginTop: 4 }}>
          <span style={{ fontSize: 9, fontWeight: 600, color: "#b45309" }}>⚠ Weight required</span>
          <span style={{ fontSize: 8, color: "#92400e" }}>(blank)</span>
        </div>
        <PrintLines n={3} widths={[70, 88, 55]} />
      </div>
    );
  }

  if (kind === "intake") {
    return (
      <div className="paper" style={wrap}>
        <div style={{ fontWeight: 700, fontSize: 11 }}>NEW PATIENT INTAKE</div>
        <div style={{ fontSize: 8, color: "#6b7570" }}>Page 1 of 4</div>
        <div style={{ display: "flex", gap: 8 }}>
          <FieldBox label="First" value="Devon" hand w="50%" />
          <FieldBox label="Last" value="Reyes" hand w="50%" />
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <FieldBox label="DOB" value="2/17/91" hand w="40%" />
          <FieldBox label="Phone" value="305-555-0142" hand w="60%" />
        </div>
        <FieldBox label="Address" value="212 Bay St, Miami FL" hand />
        <div style={{ marginTop: 4 }}>
          <div style={{ fontSize: 7.5, letterSpacing: "0.06em", textTransform: "uppercase", color: "#6b7570", fontWeight: 600 }}>Allergies</div>
          <ScribLines n={2} widths={[60, 30]} />
        </div>
        <div style={{ marginTop: "auto", fontFamily: "'Caveat', cursive", fontSize: 16, transform: "rotate(-2deg)" }}>D.Reyes</div>
      </div>
    );
  }

  if (kind === "ins") {
    return (
      <div style={{ ...wrap, padding: 14, background: "#0c4a3e", color: "#fff" }}>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <div style={{ fontWeight: 700, fontSize: 12 }}>BlueCross</div>
          <div style={{ fontSize: 8, opacity: 0.7 }}>PPO Choice Plus</div>
        </div>
        <div style={{ marginTop: 6 }}>
          <div style={{ fontSize: 7.5, opacity: 0.7, letterSpacing: "0.08em" }}>MEMBER</div>
          <div style={{ fontSize: 11, fontWeight: 600 }}>Maria Alvarez</div>
        </div>
        <div style={{ display: "flex", gap: 14 }}>
          <div>
            <div style={{ fontSize: 7.5, opacity: 0.7, letterSpacing: "0.08em" }}>ID</div>
            <div style={{ fontFamily: "ui-monospace, Menlo", fontSize: 12, letterSpacing: "0.06em" }}>XOJ883441229</div>
          </div>
          <div>
            <div style={{ fontSize: 7.5, opacity: 0.7, letterSpacing: "0.08em" }}>GROUP</div>
            <div style={{ fontFamily: "ui-monospace", fontSize: 12 }}>100482</div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 14, marginTop: "auto" }}>
          <div>
            <div style={{ fontSize: 7.5, opacity: 0.7 }}>RX BIN</div>
            <div style={{ fontFamily: "ui-monospace", fontSize: 11 }}>610014</div>
          </div>
          <div>
            <div style={{ fontSize: 7.5, opacity: 0.7 }}>EFFECTIVE</div>
            <div style={{ fontFamily: "ui-monospace", fontSize: 11 }}>01/01/26</div>
          </div>
        </div>
      </div>
    );
  }

  if (kind === "fax") {
    return (
      <div style={{ ...wrap, background: "#f3f3ee" }}>
        <div style={{ fontSize: 7.5, color: "#6b7570", filter: "blur(0.3px)" }}>INCOMING FAX · 954-555-0233 · Pg 1/2</div>
        <div style={{ fontWeight: 700, fontSize: 10, filter: "blur(0.4px)" }}>IMAGING ORDER</div>
        <div style={{ filter: "blur(0.4px)", display: "flex", flexDirection: "column", gap: 5 }}>
          <PrintLines n={6} widths={[80, 60, 90, 55, 75, 50]} />
        </div>
        <div style={{ display: "flex", gap: 6, alignItems: "center", padding: "4px 8px", background: "#fee2e2", border: "1px solid #fecaca" }}>
          <span style={{ fontSize: 9, color: "#b91c1c", fontWeight: 600 }}>Low fax resolution</span>
        </div>
        <div style={{ filter: "blur(0.6px)", display: "flex", flexDirection: "column", gap: 5 }}>
          <PrintLines n={3} widths={[88, 50, 70]} />
        </div>
      </div>
    );
  }

  if (kind === "records") {
    return (
      <div className="paper" style={wrap}>
        <div style={{ fontWeight: 700, fontSize: 11 }}>AUTHORIZATION FOR RELEASE</div>
        <div style={{ fontSize: 8, color: "#6b7570" }}>Memorial Health · ROI</div>
        <PrintLines n={4} widths={[85, 70, 80, 55]} />
        <div style={{ display: "flex", gap: 8, marginTop: 4 }}>
          <FieldBox label="Patient" value="Aisha Banks" hand w="55%" />
          <FieldBox label="DOB" value="7/22/88" hand w="40%" />
        </div>
        <FieldBox label="Records range" value="01/2024 → 04/2026" hand />
        <div style={{ marginTop: "auto", display: "flex", gap: 8 }}>
          <FieldBox label="Signature" value="A. Banks" hand w="55%" />
          <FieldBox label="Date" value="5/2/26" hand w="35%" />
        </div>
      </div>
    );
  }

  if (kind === "enroll") {
    return (
      <div className="paper" style={wrap}>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <div style={{ fontWeight: 700, fontSize: 11 }}>GROUP ENROLLMENT</div>
          <div style={{ fontSize: 8, color: "#6b7570" }}>Bayfront Logistics</div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <FieldBox label="Employee" value="Tomás Herrera" hand w="60%" />
          <FieldBox label="Payroll" value="BFL-44219" hand w="40%" />
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <FieldBox label="Plan" value="PPO 2000" hand w="50%" />
          <FieldBox label="Effective" value="6/1/26" hand w="50%" />
        </div>
        <div style={{ fontSize: 7.5, letterSpacing: "0.06em", textTransform: "uppercase", color: "#6b7570", fontWeight: 600, marginTop: 4 }}>Dependents</div>
        <div style={{ display: "flex", gap: 6 }}>
          {["Spouse", "Child"].map((d) => (
            <div key={d} style={{ flex: 1, padding: "4px 6px", border: "1px solid #c9ccc9", fontFamily: "'Caveat', cursive", fontSize: 13 }}>✓ {d}</div>
          ))}
        </div>
        <div style={{ marginTop: "auto", fontFamily: "'Caveat', cursive", fontSize: 16, transform: "rotate(-2deg)" }}>T.Herrera</div>
      </div>
    );
  }

  return null;
};

window.DocLineup = DocLineup;