/* ========================================================================
   screen-confirmation.jsx, phone showing the post-commit confirmation email
   that lands the moment Marcus approves the rebook. Mirrors the structure
   of screen-email.jsx, inverted in tone.
   ======================================================================== */

function ScreenConfirmation({ active }) {
  const c = window.DEMO_SCRIPT.confirmation_email;
  const lukas = window.DEMO_SCRIPT.passenger;

  return (
    <div className="canvas canvas-paper">
      {/* Local keyframe for the confirmation slide-in, kept inside the file
          so screens.css does not have to change. */}
      <style>{`
        @keyframes confirmSlideIn {
          0%   { opacity: 0; transform: translateY(12px); }
          100% { opacity: 1; transform: none; }
        }
        .confirm-slide-in { animation: confirmSlideIn 0.7s ease both; }
      `}</style>

      <PhaseTag label="Channel · Email · 09:24"/>

      <div className="email-stage">
        <div className="phone fade-in confirm-slide-in">
          <div className="phone-screen">
            <div className="status-bar">
              <div className="left">9:24</div>
              <div className="right">
                <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><path d="M1 7h2v3H1zM5 5h2v5H5zM9 3h2v7H9zM13 1h2v9h-2z"/></svg>
                <svg width="15" height="11" viewBox="0 0 15 11" fill="none" stroke="currentColor" strokeWidth="1"><path d="M1 4 Q7.5 -1 14 4M3 6 Q7.5 2 12 6M5.5 8 Q7.5 6.5 9.5 8"/><circle cx="7.5" cy="9.5" r="0.7" fill="currentColor"/></svg>
                <svg width="24" height="11" viewBox="0 0 24 11" fill="none">
                  <rect x="0.5" y="0.5" width="20" height="10" rx="2.5" stroke="currentColor"/>
                  <rect x="2" y="2" width="16" height="7" rx="1" fill="currentColor"/>
                  <rect x="21.5" y="3.5" width="1.5" height="4" rx="0.5" fill="currentColor"/>
                </svg>
              </div>
            </div>

            {/* Gmail-style toolbar */}
            <div className="gm-toolbar">
              <span className="gm-back">←</span>
              <div className="gm-acts">
                <span className="gm-act" aria-label="Snooze">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2M8 3l-4 3M16 3l4 3"/></svg>
                </span>
                <span className="gm-act" aria-label="Archive">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M5 6l1 13a2 2 0 002 2h8a2 2 0 002-2l1-13M9 11h6"/></svg>
                </span>
                <span className="gm-act" aria-label="Delete">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/></svg>
                </span>
                <span className="gm-act" aria-label="Mark unread">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 7l9 6 9-6M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7M3 7l2-2h14l2 2"/></svg>
                </span>
                <span className="gm-act gm-more">⋮</span>
              </div>
            </div>

            {/* Gmail message metadata */}
            <div className="gm-meta">
              <div className="gm-meta-line"><span className="gm-meta-k">From:</span> <strong>{c.from_name}</strong> &lt;{c.from_addr}&gt;</div>
              <div className="gm-meta-line"><span className="gm-meta-k">Date:</span> {window.DEMO_DATES.TODAY_LONG} at 09:24</div>
              <div className="gm-meta-line"><span className="gm-meta-k">Subject:</span> {c.subject}</div>
              <div className="gm-meta-line"><span className="gm-meta-k">To:</span> &lt;<a className="gm-mail-link">{lukas.email}</a>&gt;</div>
            </div>

            {/* Email content */}
            <div className="ek-email-body">

              {/* Sender bar with logo */}
              <div className="ek-sender-bar">
                <div className="ek-logo-tile">
                  <img src="assets/emirates-logo.png" alt="Emirates" className="ek-logo-img" />
                </div>
                <div className="ek-safe-senders">Add Emirates to your safe senders list</div>
              </div>

              <div className="ek-doc">
                {/* Headline row, green check left of the title */}
                <div style={{display: "flex", alignItems: "center", gap: 10, margin: "0 0 18px"}}>
                  <svg width="40" height="40" viewBox="0 0 40 40" aria-hidden="true" style={{flexShrink: 0}}>
                    <circle cx="20" cy="20" r="20" fill="#1f9d55"/>
                    <path d="M12 20.5 L18 26 L29 14" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <h1 className="ek-headline" style={{margin: 0}}>{c.headline}</h1>
                </div>

                <div className="ek-booking-ref">
                  Emirates booking reference: <strong>{lukas.pnr}</strong>
                </div>

                <p className="ek-greet">Dear Mr. Weber,</p>

                <p className="ek-para">{c.body}</p>

                {/* Flight details table, reusing the cancellation email styles */}
                <div className="ek-table-wrap">
                  <div className="ek-table-caption">Flight details:</div>
                  <table className="ek-flight-table">
                    <thead>
                      <tr>
                        <th>Flight number</th>
                        <th>Origin</th>
                        <th>Destination</th>
                        <th>Departure</th>
                        <th>Arrival</th>
                        <th>Seat</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td><strong>{c.flight_code}</strong></td>
                        <td>{c.from_city}</td>
                        <td>{c.to_city}</td>
                        <td>{c.depart_date} · {c.depart}</td>
                        <td>{c.arrive_date} · {c.arrive}</td>
                        <td>{c.seat}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <p className="ek-para ek-para-sm">
                  Meal preference: <strong>{c.meal}</strong>. Boarding pass is attached and is also available in <a className="ek-link">Manage Your Booking</a>.
                </p>

                <p className="ek-signoff">Kind regards,</p>
                <p className="ek-signoff">The Emirates team</p>

                <div className="ek-last-updated">
                  Last Updated (GST): {window.DEMO_DATES.TODAY_LONG}, 09:24
                </div>
              </div>
            </div>

            {/* Gmail bottom action bar */}
            <div className="gm-bottom">
              <button className="gm-bottom-btn">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 17l-5-5 5-5M4 12h11a5 5 0 015 5v2"/></svg>
                Reply
              </button>
              <button className="gm-bottom-btn">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 17l5-5-5-5M20 12H9a5 5 0 00-5 5v2"/></svg>
                Forward
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ScreenConfirmation = ScreenConfirmation;