/* global React, Icon */

const AccountScreen = ({ onNav, accountMode = "preview", setAccountMode, showExplicitContent = true, setShowExplicitContent }) => {
  const planLabel = accountMode === "preview" ? "30-second preview" : accountMode === "trial" ? "3-day trial" : "Premium";

  return (
    <div className="account page page-pad-top" data-screen-label="09 Account Settings">
      <section className="account-hero glass">
        <div className="account-profile">
          <div className="account-photo">
            <Icon name="user" size={46} />
          </div>
          <div>
            <span className="eyebrow">Account Settings</span>
            <h1 className="account-title">Your Profile</h1>
            <p className="account-copy">Manage the listening account used for VIRAL TENSION streaming.</p>
          </div>
        </div>
        <div className="account-plan">
          <span>Current Plan</span>
          <b>{planLabel}</b>
        </div>
      </section>

      <section className="account-grid">
        <div className="account-panel glass">
          <div className="section-title">
            <h2>Profile</h2>
          </div>
          <div className="setting-row">
            <span>Display name</span>
            <b>VIRAL TENSION Listener</b>
          </div>
          <div className="setting-row">
            <span>Email</span>
            <b>Signed-in account</b>
          </div>
          <div className="setting-row">
            <span>Profile photo</span>
            <b>Account photo</b>
          </div>
        </div>

        <div className="account-panel glass">
          <div className="section-title">
            <h2>Subscription</h2>
          </div>
          <div className="setting-row">
            <span>Preview length</span>
            <b>{accountMode === "preview" ? "30 seconds" : "Full tracks"}</b>
          </div>
          <div className="setting-row">
            <span>Billing</span>
            <b>{accountMode === "preview" ? "Not started" : "$4.99/mo"}</b>
          </div>
          <div className="account-actions">
            {accountMode === "preview" ? (
              <button className="btn btn-primary" onClick={() => setAccountMode("trial")}>Start 3-Day Trial</button>
            ) : (
              <button className="btn btn-ghost" onClick={() => setAccountMode("preview")}>Return to Preview</button>
            )}
            <button className="btn btn-ghost" onClick={() => onNav("Browse")}>Browse Music</button>
          </div>
        </div>

        <div className="account-panel glass wide">
          <div className="section-title">
            <h2>Playback</h2>
          </div>
          <div className="account-options">
            <label>
              <input
                type="checkbox"
                checked={showExplicitContent}
                onChange={(e) => setShowExplicitContent(e.target.checked)}
              />
              <span>Show explicit content</span>
            </label>
            <label><input type="checkbox" defaultChecked /> <span>Autoplay similar songs</span></label>
            <label><input type="checkbox" /> <span>Email playlist updates</span></label>
          </div>
        </div>
      </section>
    </div>
  );
};

window.AccountScreen = AccountScreen;