// Employee view — same polish as owner, correctly SCOPED.
// No finances, no money recap, no business approvals, no customer inbox.

// Calm first-run skeleton (reuses global .card-empty styles).
const EmpEmpty = ({ lines = 3, note }) => (
  <div className="card-empty">
    <div className="card-empty-rows">
      {Array.from({ length: lines }).map((_, i) => (
        <div key={i} className="ce-row"><div className="ce-dot" /><div className="ce-bar" style={{ width: `${78 - i * 16}%` }} /></div>
      ))}
    </div>
    {note && <div className="card-empty-note">{note}</div>}
  </div>
);

// "While you were off" — the employee parallel to the owner's recap, but the
// number counts THINGS HANDLED and outcomes are time/busywork, never dollars.
const EmpRecapHero = ({ d, emp, day }) => {
  if (day === "day1") {
    return (
      <div className="recap recap-empty">
        <div className="recap-lead-wrap">
          <div className="recap-eyebrow"><Ic.Sparkle size={12} /> Welcome, {emp.name.split(" ")[0]}</div>
          <h2 className="recap-lead recap-lead-muted">Let's get your <span className="accent">workspace</span> set up.</h2>
          <p className="recap-sub">
            Tell the assistant your role and who's on your crew — by tomorrow morning E28E sorts your
            day and handles the busywork so you can focus on the work itself.
          </p>
        </div>
        <div className="recap-empty-meter">
          <div className="recap-empty-meter-label">Handled for you</div>
          <div className="recap-empty-meter-val">0<small>so far</small></div>
        </div>
      </div>
    );
  }
  const r = d.empRecap;
  return (
    <div className="recap">
      <div className="recap-lead-wrap">
        <div className="recap-eyebrow"><Ic.Sparkle size={12} /> While you were off · this morning</div>
        <h2 className="recap-lead">E28E handled <span className="accent">{r.count} things</span> for you.</h2>
        <p className="recap-sub">Here's your day, sorted. {r.sub}</p>
      </div>
      <div className="recap-items">
        {r.items.map((it, i) => (
          <div key={i} className="recap-item recap-item-static">
            <span className="recap-item-did">{it.did}</span>
            <span className="recap-item-arrow">{it.detail}</span>
            <span className="recap-done"><Ic.Check size={12} /></span>
          </div>
        ))}
      </div>
    </div>
  );
};

// "You're in control" — the agent PROPOSES, the employee accepts.
const EmpAccept = ({ d, day }) => {
  const [resolved, setResolved] = React.useState({});
  const items = day === "day1" ? [] : d.empProposals;
  const resolve = (id, v) => setResolved(r => ({ ...r, [id]: v }));
  return (
    <div className="card col-6 card-approvals">
      <div className="card-head">
        <div className="card-title card-title-strong"><Ic.Bot /> Your plan for today</div>
        <div className="reassure reassure-inline"><Ic.Shield size={12} /> {d.empControlNote}</div>
      </div>
      {day === "day1" ? (
        <EmpEmpty lines={2} note="When your AI agent wants to adjust your route or hours, it asks here first. Nothing changes without your okay." />
      ) : (
        <div className="approvals-list">
          {items.map(p => {
            const Icon = Ic[p.icon] || Ic.Sparkle;
            const st = resolved[p.id];
            return (
              <div key={p.id} className="approval" data-resolved={st || ""}>
                <div className="approval-icon"><Icon size={15} /></div>
                <div className="approval-body">
                  <div className="approval-title">{p.title}</div>
                  <div className="approval-detail">{p.detail}</div>
                </div>
                {st ? (
                  <div className="approval-done" data-verb={st === "accept" ? "approved" : "dismissed"}>
                    {st === "accept" ? <><Ic.Check size={12} /> Accepted</> : <>Adjusting…</>}
                    <button className="approval-undo" onClick={() => resolve(p.id, null)}><Ic.Undo size={11} /> Undo</button>
                  </div>
                ) : (
                  <div className="approval-actions">
                    <button className="btn approve" onClick={() => resolve(p.id, "accept")}><Ic.Check size={12} /> {p.accept}</button>
                    <button className="btn ghost dismiss" onClick={() => resolve(p.id, "adjust")}>{p.adjust}</button>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

const TasksCard = ({ d, onToggle, day }) => (
  <div className="card col-3">
    <div className="card-head">
      <div className="card-title"><Ic.Check /> My tasks</div>
      <button className="card-action" data-nav="tasks"><Ic.Plus size={12} /> Add</button>
    </div>
    {day === "day1" ? (
      <EmpEmpty lines={3} note="Your crew lead's tasks land here. E28E flags what's due and reminds you." />
    ) : (
    <div>
      {d.empTasks.map((t, i) => {
        const tone = t.priority === "high" ? "amber" : "gray";
        return (
          <div key={i} className="task" data-done={t.done}>
            <div className="task-check" onClick={() => onToggle(i)}>
              {t.done && <Ic.Check size={11} style={{ color: "var(--accent-ink)" }} />}
            </div>
            <div>
              <div className="task-title">{t.title}</div>
              <div className="task-meta">
                <span className={`pill ${tone}`}>{t.priority.toUpperCase()}</span>
                <span>{t.project}</span>
                <span>· {t.due}</span>
              </div>
            </div>
            <button className="card-action"><Ic.Chevron size={12} /></button>
          </div>
        );
      })}
    </div>
    )}
  </div>
);

const EmpScheduleCard = ({ d, day }) => (
  <div className="card col-3">
    <div className="card-head">
      <div className="card-title"><Ic.Calendar /> My day</div>
      <button className="card-action">Wed, May 6 <Ic.Chevron size={12} /></button>
    </div>
    {day === "day1" ? (
      <EmpEmpty lines={3} note="Connect your schedule and your stops, dispatches, and site visits show here." />
    ) : (
    <div>
      {d.today.slice(0, 4).map((t, i) => (
        <div key={i} className="day">
          <div className="day-time">{t.time}</div>
          <div>
            <div className="day-title"><span className={`pill ${t.tone}`}>{t.pill}</span>{t.title}</div>
            <div className="day-sub">{t.sub}</div>
          </div>
        </div>
      ))}
    </div>
    )}
  </div>
);

// Schedule Optimizer, made to feel alive — what it did, what it's watching.
const EmpAgentCard = ({ d, day }) => {
  const a = d.empAgent;
  return (
    <div className="card col-4" data-tone="muted">
      <div className="card-head">
        <div className="card-title"><Ic.Bot /> {a.name}</div>
        <span className="scope-chip"><span className="dot" /> Working for you</span>
      </div>
      {day === "day1" ? (
        <EmpEmpty lines={2} note="Your AI agent gets to know your routes and routine, then quietly takes the busywork off your plate." />
      ) : (
        <>
          <div className="emp-agent-summary">{a.summary}</div>
          <div className="emp-agent-split">
            <div className="emp-agent-col">
              <div className="emp-agent-h">Did this morning</div>
              {a.did.map((x, i) => <div key={i} className="emp-agent-item"><span className="emp-agent-dot" data-done="true" /><span>{x}</span></div>)}
            </div>
            <div className="emp-agent-col">
              <div className="emp-agent-h">Watching for you</div>
              {a.watching.map((x, i) => <div key={i} className="emp-agent-item"><span className="emp-agent-dot" /><span>{x}</span></div>)}
            </div>
          </div>
          <div className="emp-agent-foot">
            <button className="btn" data-nav="agent">View today's route</button>
            <button className="btn ghost" data-nav="agent">Agent settings</button>
          </div>
        </>
      )}
    </div>
  );
};

// Hours & pay — scoped read-only, with the payroll-provider honesty note.
const EmpHoursCard = ({ d, day }) => (
  <div className="card col-2">
    <div className="card-head">
      <div className="card-title"><Ic.Clock /> Hours &amp; pay</div>
    </div>
    {day === "day1" ? (
      <EmpEmpty lines={2} note="Your logged hours and pay appear here once you start clocking in." />
    ) : (
      <>
        <div className="emp-pay">
          {d.empPay.map((p, i) => (
            <div key={i} className="emp-pay-row"><span className="l">{p.l}</span><span className="v">{p.v}</span></div>
          ))}
        </div>
        <div className="emp-payroll-note">
          <Ic.Shield size={11} /> Powered by your payroll provider — E28E shows your hours &amp; pay, it doesn't move the money.
        </div>
      </>
    )}
  </div>
);

const EmpProjectsCard = ({ d, day }) => (
  <div className="card col-3">
    <div className="card-head">
      <div className="card-title"><Ic.Folder /> My projects</div>
      <button className="card-action" data-nav="projects">All <Ic.Chevron size={12} /></button>
    </div>
    {day === "day1" ? (
      <EmpEmpty lines={2} note="The jobs you're assigned to show here, with progress and crew." />
    ) : (
    <div>
      {d.projects.slice(0, 3).map((p, i) => (
        <div key={i} className="proj">
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="proj-title">{p.name}</div>
            <div className="proj-meta">{p.client} · due {p.due}</div>
          </div>
          <div className="proj-stack">
            {p.crew.map((c, j) => <div key={j} className="av">{c}</div>)}
          </div>
          <div style={{ width: 60 }}><div className="proj-progress"><div style={{ width: `${p.pct}%` }} /></div></div>
          <div className="proj-pct">{p.pct}%</div>
        </div>
      ))}
    </div>
    )}
  </div>
);

// Team messages — crew/team comms ONLY (never customer channels).
const EmpInboxCard = ({ d, day }) => {
  const items = [
    { name: "Elena Marsh", initials: "EM", snippet: "Cedar Hill plant list updated — check before you load up.", time: "12m" },
    { name: "Anya · Office", initials: "AN", snippet: "Salem Stone confirmed your 12:30 pickup.", time: "1h" },
    { name: "Reggie Sosa", initials: "RS", snippet: "Running 10 late — traffic on the bridge.", time: "2h" },
  ];
  return (
    <div className="card col-3">
      <div className="card-head">
        <div className="card-title"><Ic.Users /> Team messages</div>
        <span className="emp-team-chip"><Ic.Users size={10} /> Crew only</span>
        <button className="card-action" data-nav="messages" style={{ marginLeft: "auto" }}>All <Ic.Chevron size={12} /></button>
      </div>
      {day === "day1" ? (
        <EmpEmpty lines={2} note="Messages from your crew and the office land here — scoped to your team, not customers." />
      ) : (
      <div className="inbox-list">
        {items.map((i, j) => (
          <div key={j} className="inbox-item unread">
            <div className="emp-team-av">{i.initials}</div>
            <div>
              <div className="inbox-name">{i.name}</div>
              <div className="inbox-snippet">{i.snippet}</div>
            </div>
            <div className="inbox-time">{i.time}</div>
          </div>
        ))}
      </div>
      )}
    </div>
  );
};

window.EmpCards = { EmpRecapHero, EmpAccept, TasksCard, EmpScheduleCard, EmpAgentCard, EmpHoursCard, EmpProjectsCard, EmpInboxCard };