// Desktop backdrop simulating a Zoom/Teams meeting + screen share.
// This makes the floating window's transparency meaningful.

const DesktopBackdrop = () => {
  const [time, setTime] = React.useState(() => new Date());
  React.useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 30000);
    return () => clearInterval(id);
  }, []);
  const hh = String(time.getHours()).padStart(2, "0");
  const mm = String(time.getMinutes()).padStart(2, "0");

  return (
    <div className="desktop">
      <div className="desktop-grid">
        {/* Screen share — top, spans 2 cols */}
        <div className="tile tile-share">
          <div className="share-titlebar">
            <span className="dot" />
            <span className="dot" />
            <span className="dot" />
            <div style={{
              flex: 1, textAlign: "center", fontSize: 12,
              color: "#666", fontFamily: "var(--font-ui)"
            }}>
              Network_Architecture_v3.pdf — Adobe Acrobat
            </div>
          </div>
          <div className="share-content">
            <h2>Propuesta de segmentación de red — Cliente Acme</h2>
            <p>
              Diseño preliminar de la infraestructura de red para la sede principal.
              Incluye asignación de direccionamiento, esquema de VLANs propuestas,
              y los requisitos de hardware necesarios para la ejecución del proyecto.
            </p>
            <div className="share-diagram">
              <div className="share-box">10.0.10.0/24 — USERS</div>
              <div className="share-box">10.0.20.0/24 — GUEST</div>
              <div className="share-box">10.0.30.0/24 — SERVERS</div>
              <div className="share-box">10.0.40.0/24 — VOIP</div>
              <div className="share-box">10.0.50.0/24 — IOT</div>
            </div>
            <p style={{ marginTop: 8, color: "#777", fontSize: 12 }}>
              Página 4 de 12 — Última edición hace 2 horas
            </p>
          </div>
        </div>

        {/* Self tile */}
        <div className="tile tile-self">
          <div style={{
            position: "absolute", inset: 0,
            display: "grid", placeItems: "center"
          }}>
            <div style={{
              width: 96, height: 96, borderRadius: "50%",
              background: "rgba(255,255,255,0.08)",
              display: "grid", placeItems: "center",
              color: "rgba(255,255,255,0.55)",
              fontSize: 36, fontWeight: 600,
              fontFamily: "var(--font-ui)"
            }}>
              JM
            </div>
          </div>
          <div className="tile-name">Tú (Jordi Martí)</div>
          <div className="tile-mic"><IconMic size={12} /></div>
        </div>

        {/* Client tile */}
        <div className="tile tile-client">
          <div style={{
            position: "absolute", inset: 0,
            display: "grid", placeItems: "center"
          }}>
            <div style={{
              width: 96, height: 96, borderRadius: "50%",
              background: "rgba(255,255,255,0.08)",
              display: "grid", placeItems: "center",
              color: "rgba(255,255,255,0.55)",
              fontSize: 36, fontWeight: 600,
              fontFamily: "var(--font-ui)"
            }}>
              CR
            </div>
          </div>
          <div className="tile-name">Carmen Ruiz — Acme IT</div>
          <div className="tile-mic" style={{ background: "rgba(239, 68, 68, 0.85)" }}>
            <IconMic size={12} />
          </div>
        </div>
      </div>

      {/* Meeting toolbar */}
      <div className="meet-toolbar">
        <div className="meet-btn"><IconMic size={18} /></div>
        <div className="meet-btn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
               strokeLinejoin="round">
            <polygon points="23 7 16 12 23 17 23 7" />
            <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
          </svg>
        </div>
        <div className="meet-btn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
               strokeLinejoin="round">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
            <line x1="8" y1="21" x2="16" y2="21" />
            <line x1="12" y1="17" x2="12" y2="21" />
          </svg>
        </div>
        <div className="meet-btn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
               strokeLinejoin="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
            <circle cx="9" cy="7" r="4" />
            <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
            <path d="M16 3.13a4 4 0 0 1 0 7.75" />
          </svg>
        </div>
        <div className="meet-btn danger">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" strokeWidth="2" strokeLinecap="round"
               strokeLinejoin="round">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07
                     19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1
                     4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1
                     -.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11
                     -.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"
                     transform="rotate(135 12 12)" />
          </svg>
        </div>
      </div>

      {/* Taskbar */}
      <div className="taskbar">
        <div className="taskbar-icon">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
            <rect x="3" y="3" width="8" height="8" />
            <rect x="13" y="3" width="8" height="8" />
            <rect x="3" y="13" width="8" height="8" />
            <rect x="13" y="13" width="8" height="8" />
          </svg>
        </div>
        <div className="taskbar-icon">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" strokeWidth="2">
            <circle cx="11" cy="11" r="8" />
            <line x1="21" y1="21" x2="16.65" y2="16.65" />
          </svg>
        </div>
        <div className="taskbar-icon" style={{
          background: "var(--accent-primary-muted)",
          color: "var(--accent-primary)"
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" strokeWidth="2">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
            <line x1="8" y1="21" x2="16" y2="21" />
            <line x1="12" y1="17" x2="12" y2="21" />
          </svg>
        </div>
        <div className="taskbar-icon">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" strokeWidth="2">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
            <polyline points="14 2 14 8 20 8" />
          </svg>
        </div>
        <div className="taskbar-spacer" />
        <div className="taskbar-clock">
          <div>{hh}:{mm}</div>
          <div style={{ fontSize: 10, opacity: 0.7 }}>28/04/2026</div>
        </div>
      </div>
    </div>
  );
};

window.DesktopBackdrop = DesktopBackdrop;