// FRM-PROC-14 · Profile & settings
const ProfileScreen = ({ nav, t, setTweak }) => {
  const { AppBar, Btn, Modal } = window.Fm;
  const Ic = window.Icons, FD = window.FD;
  const me = FD.ME;
  const logoutOpen = t.profileState === "logout";
  const [notif, setNotif] = useState({ broadcasts: true, decisions: true, deliveries: true });
  const [prods, setProds] = useState(me.products);

  const Toggle = ({ on, onClick }) => (
    <div className={`switch ${on ? "on" : ""}`} onClick={onClick} role="switch" aria-checked={on}/>
  );

  return (
    <>
      <AppBar title="Profile" align="left"
        right={<button className="fm-iconbtn" aria-label="Settings"><Ic.Settings size={20}/></button>}/>
      <div className="fm-body">
        <div className="fm-scroll" style={{ paddingTop: 6 }}>
          {/* Header */}
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 8, padding: "0 2px 14px" }}>
            <span className="fm-avatar-lg">{me.initials}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-0.01em" }}>{me.name}</div>
              <div className="muted" style={{ fontSize: 13 }}>{me.phone}</div>
              <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
                <span className="badge badge-success"><Ic.Star size={11}/> {me.tier}</span>
                <span className="badge badge-outline">{me.completedOrders} orders</span>
              </div>
            </div>
          </div>

          {/* Personal info */}
          <div className="fm-ds-label" style={{ margin: "8px 2px 8px" }}>Personal info</div>
          <div className="fm-card flush" style={{ marginBottom: 16 }}>
            <button className="fm-listrow"><span className="fm-lr-ic"><Ic.User size={18}/></span><div className="fm-lr-body"><div className="fm-lr-title">Name</div><div className="fm-lr-sub">{me.name}</div></div><Ic.Edit size={16} style={{ color: "var(--muted-foreground)" }}/></button>
            <button className="fm-listrow"><span className="fm-lr-ic"><Ic.Phone size={18}/></span><div className="fm-lr-body"><div className="fm-lr-title">Phone <span className="badge badge-outline" style={{ marginLeft: 6 }}>Locked</span></div><div className="fm-lr-sub">{me.phone}</div></div></button>
            <button className="fm-listrow"><span className="fm-lr-ic"><Ic.MapPin size={18}/></span><div className="fm-lr-body"><div className="fm-lr-title">Region</div><div className="fm-lr-sub">{me.region}</div></div><Ic.Edit size={16} style={{ color: "var(--muted-foreground)" }}/></button>
          </div>

          {/* Products grown */}
          <div className="fm-ds-label" style={{ margin: "0 2px 8px" }}>Products you grow</div>
          <div className="fm-card fm-card-pad" style={{ marginBottom: 16 }}>
            <div className="fm-chips wrap">
              {FD.PRODUCTS.map(p => {
                const on = prods.includes(p);
                return <button key={p} className={`fm-chip pick ${on ? "on" : ""}`} onClick={() => setProds(s => on ? s.filter(x => x !== p) : [...s, p])}>{on && <Ic.Check size={14}/>}{p}</button>;
              })}
            </div>
          </div>

          {/* Bank / payment */}
          <div className="fm-ds-label" style={{ margin: "0 2px 8px" }}>Payment</div>
          <div className="fm-card flush" style={{ marginBottom: 16 }}>
            <button className="fm-listrow"><span className="fm-lr-ic"><Ic.Coin size={18}/></span><div className="fm-lr-body"><div className="fm-lr-title">Bank account</div><div className="fm-lr-sub">{me.bank}</div></div><Ic.Edit size={16} style={{ color: "var(--muted-foreground)" }}/></button>
            <button className="fm-listrow"><span className="fm-lr-ic"><Ic.Phone size={18}/></span><div className="fm-lr-body"><div className="fm-lr-title">Mobile money</div><div className="fm-lr-sub">{me.mobileMoney}</div></div><Ic.Edit size={16} style={{ color: "var(--muted-foreground)" }}/></button>
          </div>

          {/* Language */}
          <div className="fm-ds-label" style={{ margin: "0 2px 8px" }}>Preferences</div>
          <div className="fm-card flush" style={{ marginBottom: 16 }}>
            <button className="fm-listrow"><span className="fm-lr-ic"><Ic.Globe size={18}/></span><div className="fm-lr-body"><div className="fm-lr-title">Language</div><div className="fm-lr-sub">{me.language}</div></div><Ic.ChevronRight size={16} style={{ color: "var(--muted-foreground)" }}/></button>
            <button className="fm-listrow" onClick={() => nav.go("myGroups")}><span className="fm-lr-ic"><Ic.Layers size={18}/></span><div className="fm-lr-body"><div className="fm-lr-title">My groups</div><div className="fm-lr-sub">See which groups you belong to</div></div><Ic.ChevronRight size={16} style={{ color: "var(--muted-foreground)" }}/></button>
          </div>

          {/* Notification preferences */}
          <div className="fm-ds-label" style={{ margin: "0 2px 8px" }}>Notifications</div>
          <div className="fm-card flush" style={{ marginBottom: 16 }}>
            <div className="fm-toggle-row"><div className="fm-tr-body"><div className="fm-tr-title">New broadcasts</div><div className="fm-tr-sub">When a buyer posts a matching requirement</div></div><Toggle on={notif.broadcasts} onClick={() => setNotif(s => ({ ...s, broadcasts: !s.broadcasts }))}/></div>
            <div className="fm-toggle-row"><div className="fm-tr-body"><div className="fm-tr-title">Response decisions</div><div className="fm-tr-sub">Accepted or not selected</div></div><Toggle on={notif.decisions} onClick={() => setNotif(s => ({ ...s, decisions: !s.decisions }))}/></div>
            <div className="fm-toggle-row"><div className="fm-tr-body"><div className="fm-tr-title">Deliveries</div><div className="fm-tr-sub">Slot reminders and gate updates</div></div><Toggle on={notif.deliveries} onClick={() => setNotif(s => ({ ...s, deliveries: !s.deliveries }))}/></div>
          </div>

          {/* Help & logout */}
          <div className="fm-card flush" style={{ marginBottom: 16 }}>
            <button className="fm-listrow"><span className="fm-lr-ic"><Ic.HelpCircle size={18}/></span><div className="fm-lr-body"><div className="fm-lr-title">Help &amp; support</div></div><Ic.ChevronRight size={16} style={{ color: "var(--muted-foreground)" }}/></button>
            <button className="fm-listrow" onClick={() => setTweak("profileState", "logout")}><span className="fm-lr-ic danger"><Ic.Logout size={18}/></span><div className="fm-lr-body"><div className="fm-lr-title" style={{ color: "var(--destructive)" }}>Log out</div></div></button>
          </div>

          <div className="muted" style={{ textAlign: "center", fontSize: 11.5, paddingBottom: 8 }}>AMOMS · Farmer app v1.0</div>
        </div>
      </div>

      <Modal open={logoutOpen} onClose={() => setTweak("profileState", "view")} title="Log out?"
        actions={<>
          <button className="fm-btn fm-btn-outline" onClick={() => setTweak("profileState", "view")}>Cancel</button>
          <button className="fm-btn fm-btn-primary" style={{ background: "var(--destructive)" }} onClick={() => { setTweak("profileState", "view"); nav.tab("login"); }}>Log out</button>
        </>}>
        <p>Logging out clears your saved data on this phone. You'll need your phone number and an OTP to sign back in.</p>
      </Modal>
    </>
  );
};

window.FarmerPages = Object.assign(window.FarmerPages || {}, {
  profile: { brandStatus: false, render: (ctx) => <ProfileScreen {...ctx}/> },
});