/* Mail — 3-pane folder / list / preview view */

function MailScreen() {
  const [selected, setSelected] = React.useState(1);
  const folders = [
    { label: "Inbox",   count: 12, icon: <Icon.Mail size={16}/> },
    { label: "Starred", count: 3,  icon: <Icon.Star size={16}/> },
    { label: "Sent",    count: 0,  icon: <Icon.Arrow size={16}/> },
    { label: "Drafts",  count: 5,  icon: <Icon.Doc size={16}/> },
    { label: "Trash",   count: 0,  icon: <Icon.Trash size={16}/> },
  ];
  const labels = [
    { label: "Personal", color: "#52c41a" },
    { label: "Work",     color: "#1677ff" },
    { label: "Travel",   color: "#faad14" },
    { label: "Important",color: "#f5222d" },
  ];
  const messages = [
    { from:"Stebin Ben",  time:"2:04 PM", subj:"Welcome to TolbNet 🎉", prev:"Thanks for joining — here's everything you need to get started…", initials:"SB", bg:"linear-gradient(135deg,#69b1ff,#1677ff)" },
    { from:"GitHub",      time:"1:32 PM", subj:"[tolbnet] PR #142 merged", prev:"Your pull request has been merged into main by dtolb.", initials:"GH", bg:"#262626" },
    { from:"Linear",      time:"11:08 AM", subj:"3 issues assigned this week", prev:"View your weekly summary and what's next in your queue.", initials:"L", bg:"#5e6ad2" },
    { from:"Figma",       time:"Tue",     subj:"Mantis v2.2.4 published", prev:"Your library has been updated. 12 new components, 4 fixed.", initials:"F", bg:"#f24e1e" },
    { from:"Apple",       time:"Mon",     subj:"Your receipt from Apple",  prev:"Receipt #4D2N8KP for $29.00 — iCloud+ 2TB.", initials:"", bg:"#000", icon:"" },
  ];
  const m = messages[selected];

  return (
    <div className="mail">
      <div className="mail-folders">
        <Button type="primary" style={{width:"100%",marginBottom:14}} icon={<Icon.Plus size={14}/>}>Compose</Button>
        <div className="sb-section" style={{padding:"8px 8px 4px"}}>Folders</div>
        {folders.map((f, i) => (
          <div key={i} className={`sb-item ${i===0?"active":""}`}>
            {f.icon}
            <span>{f.label}</span>
            {f.count ? <span style={{marginLeft:"auto",fontSize:12,color:"#8c8c8c"}}>{f.count}</span> : null}
          </div>
        ))}
        <div className="sb-section" style={{padding:"8px 8px 4px"}}>Labels</div>
        {labels.map((l, i) => (
          <div key={i} className="sb-item">
            <span className="dot" style={{background:l.color,width:8,height:8}}/>
            <span>{l.label}</span>
          </div>
        ))}
      </div>

      <div className="mail-list">
        <div style={{padding:"12px 16px",borderBottom:"1px solid #f0f0f0",display:"flex",alignItems:"center",gap:8}}>
          <input className="input" placeholder="Search mail" style={{height:32,fontSize:13}}/>
          <Button type="default" size="md" icon={<Icon.Filter size={14}/>}></Button>
        </div>
        {messages.map((mg, i) => (
          <div key={i} className={`mail-item ${i===selected?"active":""}`} onClick={() => setSelected(i)}>
            <div className="from">
              <span style={{display:"inline-flex",alignItems:"center",gap:8}}>
                <Avatar size={24} bg={mg.bg}>{mg.initials}</Avatar>
                {mg.from}
              </span>
              <span className="time">{mg.time}</span>
            </div>
            <div className="subj">{mg.subj}</div>
            <div className="prev">{mg.prev}</div>
          </div>
        ))}
      </div>

      <div className="mail-preview">
        <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:18}}>
          <h3 style={{font:"600 20px/28px var(--font-sans)",margin:0}}>{m.subj}</h3>
          <div style={{display:"flex",gap:8}}>
            <Button type="default" size="md" icon={<Icon.Star size={14}/>}></Button>
            <Button type="default" size="md" icon={<Icon.Trash size={14}/>}></Button>
            <Button type="primary" size="md">Reply</Button>
          </div>
        </div>
        <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:18,paddingBottom:14,borderBottom:"1px solid #f0f0f0"}}>
          <Avatar size={40} bg={m.bg}>{m.initials}</Avatar>
          <div>
            <div style={{font:"500 14px/22px var(--font-sans)",color:"#262626"}}>{m.from}</div>
            <div style={{font:"400 12px/20px var(--font-sans)",color:"#8c8c8c"}}>to me · {m.time}</div>
          </div>
        </div>
        <div style={{font:"400 14px/24px var(--font-sans)",color:"#262626"}}>
          <p>Hey there,</p>
          <p style={{marginTop:12}}>{m.prev} — and a few more details below so you can hit the ground running on day one.</p>
          <p style={{marginTop:12}}>Reach out any time. We're standing by to help you get the most out of TolbNet.</p>
          <p style={{marginTop:18,color:"#8c8c8c"}}>— The TolbNet Team</p>
        </div>
      </div>
    </div>
  );
}

window.MailScreen = MailScreen;