// Authentication screens (login + forgot password)

const LoginScreen = ({ onSignIn, onForgot }) => {
  const [email, setEmail] = React.useState("e.whitfield@whitfieldfo.com");
  const [pw, setPw] = React.useState("••••••••••");
  const [remember, setRemember] = React.useState(true);

  const submit = (e) => {
    e.preventDefault();
    onSignIn();
  };

  return (
    <div className="auth-shell" data-screen-label="Login">
      <div className="auth-left">
        <div className="auth-brand">
          <div className="brand-mark" style={{ borderColor: "var(--paper)" }}>C</div>
          <div className="brand-name" style={{ color: "var(--paper)", fontFamily: "var(--font-serif)", fontSize: 18, fontStyle: "italic" }}>
            CodeDrips
            <small style={{ color: "var(--ink-4)" }}>Financial Services</small>
          </div>
        </div>

        <div className="auth-left-inner">
          <div style={{ fontSize: 11, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 24 }}>
            Investor Portal · Est. 2007
          </div>
          <h1 className="auth-quote">
            Considered <em>capital</em>, communicated with care.
          </h1>
          <p style={{ color: "rgba(255,255,255,.6)", maxWidth: "32ch", lineHeight: 1.55, fontSize: 14 }}>
            Quarterly letters, capital statements, audited financials and stewardship reports — issued to limited partners and counsel since the firm's founding.
          </p>
          <div className="auth-fineprint">
            <span>Authorised access only</span>
            <span>FCA · SEC registered</span>
          </div>
        </div>
      </div>

      <div className="auth-right">
        <form className="auth-form" onSubmit={submit}>
          <div style={{ fontSize: 11, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 12 }}>
            Sign in
          </div>
          <h2>Welcome back.</h2>
          <p className="lede">Access your reports, statements and correspondence.</p>

          <label className="field">
            <span>Email</span>
            <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" />
          </label>
          <label className="field">
            <span>Password</span>
            <input className="input" type="password" value={pw} onChange={(e) => setPw(e.target.value)} autoComplete="current-password" />
          </label>

          <div className="field-row">
            <label className="checkbox">
              <input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} />
              Remember this device
            </label>
            <a className="link" onClick={onForgot}>Forgot password?</a>
          </div>

          <button type="submit" className="btn btn-primary btn-lg btn-block">
            Sign in <Icon name="arrowRight" size={14} />
          </button>

          <p className="alt">
            Having trouble? <a className="link">Contact Investor Relations</a>
          </p>

          <div style={{ marginTop: 56, paddingTop: 20, borderTop: "1px solid var(--rule)", fontSize: 11, color: "var(--ink-4)", display: "flex", justifyContent: "space-between", letterSpacing: ".04em" }}>
            <span>© CodeDrips Financial Services</span>
            <span>Privacy · Terms · Cookies</span>
          </div>
        </form>
      </div>
    </div>
  );
};

const ForgotScreen = ({ onBack, onSent }) => {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <div className="auth-shell" data-screen-label="Forgot password">
      <div className="auth-left">
        <div className="auth-brand">
          <div className="brand-mark" style={{ borderColor: "var(--paper)" }}>C</div>
          <div className="brand-name" style={{ color: "var(--paper)", fontFamily: "var(--font-serif)", fontSize: 18, fontStyle: "italic" }}>
            CodeDrips
            <small style={{ color: "var(--ink-4)" }}>Financial Services</small>
          </div>
        </div>
        <div className="auth-left-inner">
          <h1 className="auth-quote">
            We'll get you back <em>in</em>.
          </h1>
          <p style={{ color: "rgba(255,255,255,.6)", maxWidth: "32ch", lineHeight: 1.55, fontSize: 14 }}>
            For security, password resets must be requested from the email address on your investor record. If you no longer have access, contact your relationship manager directly.
          </p>
          <div className="auth-fineprint">
            <span>Need help?</span>
            <span>ir@codedrips.com</span>
          </div>
        </div>
      </div>

      <div className="auth-right">
        {!sent ? (
          <form className="auth-form" onSubmit={submit}>
            <a className="link" onClick={onBack} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, marginBottom: 32, textDecoration: "none" }}>
              <Icon name="arrowLeft" size={13} /> Back to sign in
            </a>
            <h2>Reset your password.</h2>
            <p className="lede">Enter the email associated with your account. We'll send a secure reset link valid for 30 minutes.</p>
            <label className="field">
              <span>Email</span>
              <input className="input" type="email" placeholder="you@firm.com" value={email} onChange={(e) => setEmail(e.target.value)} autoFocus />
            </label>
            <button type="submit" className="btn btn-primary btn-lg btn-block">
              Send reset link <Icon name="arrowRight" size={14} />
            </button>
            <p className="alt">
              Remembered it? <a className="link" onClick={onBack}>Sign in</a>
            </p>
          </form>
        ) : (
          <div className="auth-form" style={{ textAlign: "center" }}>
            <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--paper-2)", display: "grid", placeItems: "center", margin: "0 auto 20px", color: "var(--accent)" }}>
              <Icon name="inbox" size={28} stroke={1.25} />
            </div>
            <h2>Check your inbox.</h2>
            <p className="lede">
              If <strong style={{ color: "var(--ink)" }}>{email || "the address you provided"}</strong> matches an account, a reset link is on its way. The link expires in 30 minutes.
            </p>
            <button className="btn btn-ghost btn-block" onClick={onBack}>Back to sign in</button>
            <p className="alt">
              Didn't receive it? <a className="link" onClick={() => setSent(false)}>Try a different email</a>
            </p>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { LoginScreen, ForgotScreen });