// views.jsx — Ideas grid, project card, My Tasks, create-idea modal

const { useState: useStateV } = React;
const { STAGES: STAGES_V, IDEA_STATUS: STATUS_V, USERS: USERS_V } = window.SEED;

function projStats(p) {
  const total = p.tasks.length;
  const done = p.tasks.filter((t) => t.stage === 'complete').length;
  const active = p.tasks.filter((t) => t.stage === 'inprocess').length;
  const cost = p.tasks.reduce((n, t) => n + (t.cost || 0), 0);
  const spent = p.tasks.filter((t) => t.stage === 'complete').reduce((n, t) => n + (t.cost || 0), 0);
  return { total, done, active, cost, spent };
}

function ProjectCard({ project, onOpen }) {
  const s = projStats(project);
  const owner = window.userById(project.owner);
  const statusHue = STATUS_V[project.status].hue;
  return (
    <button className="proj-card" onClick={() => onOpen(project.id)}>
      <div className="proj-card-top" style={{ background: `oklch(0.96 0.035 ${statusHue})` }}>
        <span className="proj-mono">{project.category}</span>
        <window.StatusPill status={project.status} />
      </div>
      <div className="proj-card-body">
        <h3 className="proj-name">{project.name}</h3>
        <p className="proj-tagline">{project.tagline}</p>
        <div style={{ marginTop: 16 }}>
          <window.Progress value={s.done} total={s.total} />
        </div>
        <div className="proj-card-foot">
          <window.AvatarStack ids={project.team} size={26} />
          <div className="proj-meta">
            <span><strong>{s.done}</strong>/{s.total} done</span>
            <span className="dot-sep" />
            <span>{s.active} active</span>
          </div>
        </div>
        {s.cost > 0 && (
          <div className="proj-cost">
            <span className="proj-cost-lbl"><window.Icon name="wallet" size={14} stroke={2} /> Project cost</span>
            <span className="proj-cost-val">{window.fmtMoney(s.cost)}</span>
          </div>
        )}
      </div>
    </button>
  );
}

function IdeasView({ projects, onOpen, onNew, query, canCreate = true }) {
  const filtered = projects.filter((p) =>
    !query || (p.name + ' ' + p.tagline + ' ' + p.category).toLowerCase().includes(query.toLowerCase()));
  return (
    <div className="view-pad">
      <div className="view-head">
        <div>
          <h1 className="view-title">Business Ideas</h1>
          <p className="view-sub">Every idea is a project. Track it from spark to launch.</p>
        </div>
        {canCreate && (
          <button className="btn-primary" onClick={onNew}>
            <window.Icon name="plus" size={17} /> New Idea
          </button>
        )}
      </div>

      <div className="stat-strip">
        <Stat label="Total ideas" value={projects.length} icon="bolt" />
        <Stat label="Active" value={projects.filter((p) => p.status === 'active').length} icon="board" />
        <Stat label="Launched" value={projects.filter((p) => p.status === 'launched').length} icon="check" />
        <Stat label="Open tasks" value={projects.reduce((n, p) => n + p.tasks.filter((t) => t.stage !== 'complete').length, 0)} icon="clock" />
      </div>

      <div className="ideas-grid">
        {filtered.map((p) => <ProjectCard key={p.id} project={p} onOpen={onOpen} />)}
        {canCreate && (
          <button className="proj-card new-card" onClick={onNew}>
            <span className="new-card-plus"><window.Icon name="plus" size={24} /></span>
            <span>Capture a new idea</span>
          </button>
        )}
      </div>
    </div>
  );
}

function Stat({ label, value, icon }) {
  return (
    <div className="stat">
      <span className="stat-ico"><window.Icon name={icon} size={17} /></span>
      <div>
        <div className="stat-val">{value}</div>
        <div className="stat-lbl">{label}</div>
      </div>
    </div>
  );
}

// ---- My Tasks ----
function MyTasksView({ projects, onOpenTask, query }) {
  const ME_V = window.SEED.ME;
  const me = window.userById(ME_V);
  const rows = [];
  projects.forEach((p) => p.tasks.forEach((t) => {
    if (t.assignee === ME_V) rows.push({ task: t, project: p });
  }));
  const order = { pending: 0, inprocess: 1, complete: 2 };
  rows.sort((a, b) => order[a.task.stage] - order[b.task.stage]);
  const shown = rows.filter(({ task, project }) =>
    !query || (task.title + ' ' + project.name).toLowerCase().includes(query.toLowerCase()));

  return (
    <div className="view-pad">
      <div className="view-head">
        <div>
          <h1 className="view-title">My Tasks</h1>
          <p className="view-sub">Everything assigned to {me.name} across all ideas.</p>
        </div>
        <window.Avatar id={ME_V} size={40} />
      </div>

      <div className="mytasks">
        {STAGES_V.map((stage) => {
          const group = shown.filter(({ task }) => task.stage === stage.id);
          if (!group.length) return null;
          return (
            <div key={stage.id} className="mt-group">
              <div className="mt-group-head">
                <span style={{ width: 8, height: 8, borderRadius: '50%',
                  background: stage.id === 'inprocess' ? 'var(--primary)' : `oklch(0.6 0.15 ${stage.id === 'complete' ? 152 : 38})` }} />
                {stage.label}<span className="mt-count">{group.length}</span>
              </div>
              {group.map(({ task, project }) => (
                <button key={task.id} className="mt-row" onClick={() => onOpenTask(project.id, task.id)}>
                  <window.Icon name={task.stage === 'complete' ? 'check' : 'arrow'} size={15}
                    style={{ color: task.stage === 'complete' ? 'oklch(0.6 0.15 152)' : 'var(--text-faint)', flex: 'none' }} />
                  <span className="mt-title" style={{ textDecoration: task.stage === 'complete' ? 'line-through' : 'none',
                    color: task.stage === 'complete' ? 'var(--text-dim)' : 'var(--text)' }}>{task.title}</span>
                  <span className="mt-proj">{project.name}</span>
                  <window.PriorityTag level={task.priority} />
                  <span className="mt-due"><window.Icon name="clock" size={12} stroke={2.2} />{task.due}</span>
                </button>
              ))}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ---- create idea modal ----
function NewIdeaModal({ onClose, onCreate }) {
  const [name, setName] = useStateV('');
  const [tagline, setTagline] = useStateV('');
  const [category, setCategory] = useStateV('');
  const [owner, setOwner] = useStateV(USERS_V[0].id);
  const [team, setTeam] = useStateV([USERS_V[0].id]);
  const valid = name.trim().length > 1;
  const toggle = (id) => setTeam((t) => t.includes(id) ? t.filter((x) => x !== id) : [...t, id]);

  return (
    <div className="drawer-scrim center" onMouseDown={onClose}>
      <div className="modal" onMouseDown={(e) => e.stopPropagation()}>
        <header className="drawer-head">
          <span style={{ fontWeight: 700, fontSize: 15 }}>New Business Idea</span>
          <button className="icon-btn" onClick={onClose}><window.Icon name="x" size={18} /></button>
        </header>
        <div className="modal-body">
          <label className="lbl">Idea name</label>
          <input className="mini-input big" autoFocus value={name} onChange={(e) => setName(e.target.value)}
            placeholder="e.g. QuickCart" />
          <label className="lbl">One-line pitch</label>
          <input className="mini-input" value={tagline} onChange={(e) => setTagline(e.target.value)}
            placeholder="What does it do, for whom?" />
          <label className="lbl">Category</label>
          <input className="mini-input" value={category} onChange={(e) => setCategory(e.target.value)}
            placeholder="e.g. Fintech, Marketplace…" />
          <label className="lbl">Idea owner</label>
          <select className="mini-input" value={owner} onChange={(e) => { setOwner(e.target.value); if (!team.includes(e.target.value)) toggle(e.target.value); }}>
            {USERS_V.map((u) => <option key={u.id} value={u.id}>{u.name} — {u.role}</option>)}
          </select>
          <label className="lbl">Team</label>
          <div className="assignee-row">
            {USERS_V.map((u) => (
              <button key={u.id} onClick={() => toggle(u.id)}
                className={'assignee-chip' + (team.includes(u.id) ? ' on' : '')} title={u.name}>
                <window.Avatar id={u.id} size={22} />
                <span style={{ fontSize: 12.5, fontWeight: 600 }}>{u.name.split(' ')[0]}</span>
              </button>
            ))}
          </div>
        </div>
        <footer className="drawer-foot">
          <button className="btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn-primary" disabled={!valid}
            style={{ opacity: valid ? 1 : 0.5, pointerEvents: valid ? 'auto' : 'none' }}
            onClick={() => onCreate({ name: name.trim(), tagline: tagline.trim() || 'New idea — define the pitch.', category: category.trim() || 'Uncategorised', owner, team: team.length ? team : [owner] })}>
            Create idea
          </button>
        </footer>
      </div>
    </div>
  );
}

Object.assign(window, { IdeasView, MyTasksView, NewIdeaModal, projStats });