// WTS Cyprus — PBC: Engagements list, creation wizard, engagement header
const { useState, useMemo } = React;

const STATUS_FILTER_OPTS = [
  { value: 'all',       label: 'All' },
  { value: 'active',    label: 'Active' },
  { value: 'on_hold',   label: 'On hold' },
  { value: 'completed', label: 'Completed' },
];

const visibleEngagementsForRole = (role, userId) => {
  if (role === 'staff') return ENGAGEMENTS.filter(e => e.assigned.includes(userId));
  return ENGAGEMENTS;
};

// ── New-engagement wizard ──────────────────────────────────────────────────
const NewEngagementModal = ({ open, onClose, userId }) => {
  const toast = useToast();
  const [clientId, setClientId]   = useState('');
  const [serviceLine, setService] = useState('');
  const [templateId, setTemplate] = useState('');
  const [period, setPeriod]       = useState('');
  const [deadline, setDeadline]   = useState('');
  const [contacts, setContacts]   = useState([]);

  const client = clientId ? getClientById(clientId) : null;
  const tpl = templateId ? TEMPLATES.find(t => t.id === templateId) : null;
  const availableTemplates = serviceLine ? TEMPLATES.filter(t => t.serviceLine === serviceLine) : TEMPLATES;

  const reset = () => { setClientId(''); setService(''); setTemplate(''); setPeriod(''); setDeadline(''); setContacts([]); };
  const close = () => { reset(); onClose(); };

  const canCreate = client && serviceLine && tpl && period.trim() && deadline;

  const create = () => {
    if (!canCreate) return;
    toast.success('Engagement created', `${client.legalName} · ${tpl.name} · ${period}`);
    toast.info('Request list sent', `${tpl.items.length} items shipped to ${contacts.length || client.contacts.length} client contact(s)`);
    close();
  };

  const selectStyle = { appearance: 'none', backgroundImage: `url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5L12.5 6' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 10px center', backgroundSize: '14px', paddingRight: 32 };

  return (
    <Modal open={open} onClose={close} title="New engagement" width={620}
      footer={<>
        <button type="button" className="wts-link" style={{ fontSize: 13, marginRight: 'auto' }} onClick={close}>Cancel</button>
        <Button onClick={create} disabled={!canCreate}><Icon name="send" size={13} /> Create &amp; ship request list</Button>
      </>}>
      <div className="wts-form" style={{ maxWidth: 'none', gap: 16 }}>
        <div className="wts-field">
          <Label>Client <span style={{ color: 'var(--destructive)' }}>*</span></Label>
          <select className="wts-input" value={clientId} onChange={e => { setClientId(e.target.value); setContacts([]); }} style={selectStyle}>
            <option value="">Pick a client from the registry…</option>
            {CLIENTS.filter(c => c.status === 'active').map(c => <option key={c.id} value={c.id}>{c.legalName} · {c.regId}</option>)}
          </select>
        </div>

        <div className="wts-cols-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <div className="wts-field">
            <Label>Service line <span style={{ color: 'var(--destructive)' }}>*</span></Label>
            <select className="wts-input" value={serviceLine} onChange={e => { setService(e.target.value); setTemplate(''); }} style={selectStyle}>
              <option value="">Select…</option>
              {Object.entries(SERVICE_LINES).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
            </select>
          </div>
          <div className="wts-field">
            <Label>Template <span style={{ color: 'var(--destructive)' }}>*</span></Label>
            <select className="wts-input" value={templateId} onChange={e => setTemplate(e.target.value)} style={selectStyle} disabled={!serviceLine}>
              <option value="">{serviceLine ? 'Select template…' : 'Pick service line first'}</option>
              {availableTemplates.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
            </select>
          </div>
        </div>

        <div className="wts-cols-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <div className="wts-field">
            <Label>Period <span style={{ color: 'var(--destructive)' }}>*</span></Label>
            <Input placeholder="e.g. FY2025 or Q2 2025" value={period} onChange={e => setPeriod(e.target.value)} />
          </div>
          <div className="wts-field">
            <Label>Client deadline <span style={{ color: 'var(--destructive)' }}>*</span></Label>
            <input type="date" className="wts-input" value={deadline} onChange={e => setDeadline(e.target.value)} />
          </div>
        </div>

        {client && (
          <div className="wts-field">
            <Label>Invite client contacts</Label>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {client.contacts.map(ct => {
                const on = contacts.includes(ct.email);
                return (
                  <label key={ct.email} className="wts-check" style={{ alignItems: 'center', justifyContent: 'space-between', padding: '8px 11px', border: '1px solid var(--border)', borderRadius: 7 }}>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                      <input type="checkbox" checked={on} onChange={() => setContacts(xs => on ? xs.filter(x => x !== ct.email) : [...xs, ct.email])} />
                      <span><span style={{ fontWeight: 500 }}>{ct.name}</span> <span style={{ color: 'var(--muted-foreground)', fontSize: 12 }}>· {ct.role}</span></span>
                    </span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted-foreground)' }}>{ct.email}</span>
                  </label>
                );
              })}
            </div>
          </div>
        )}

        {tpl && (
          <div style={{ border: '1px solid var(--border)', borderRadius: 8, padding: '12px 14px', background: 'hsl(220 14% 98%)' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
              <span style={{ fontSize: 12.5, fontWeight: 600 }}>Request list preview</span>
              <span className="ck-badge ck-badge--outline">{tpl.items.length} items · editable after creation</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
              {tpl.items.map((it, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5 }}>
                  <Icon name={ITEM_TYPE_META[it.type].icon} size={12} style={{ opacity: 0.5 }} />
                  <span style={{ flex: 1 }}>{it.label}</span>
                  <span style={{ fontSize: 10.5, color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)' }}>{ITEM_TYPE_META[it.type].label}</span>
                  {it.required && <span style={{ fontSize: 10, color: 'hsl(0 72% 45%)' }}>required</span>}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </Modal>
  );
};

// ────────────────────────────────────────────────────────────────────────
// ENGAGEMENTS LIST
// ────────────────────────────────────────────────────────────────────────
const EngagementsList = ({ role, userId, onOpenEngagement }) => {
  const [statusFilter, setStatusFilter] = useState('all');
  const [search,       setSearch]       = useState('');
  const [assignee,     setAssignee]     = useState('all');
  const [newModal,     setNewModal]     = useState(false);

  const allVisible = useMemo(() => visibleEngagementsForRole(role, userId), [role, userId]);
  const staffOptions = useMemo(() => USERS.filter(u => u.role === 'staff'), []);

  const counts = useMemo(() => ({
    active: allVisible.filter(e => e.status === 'active').length,
    hold:   allVisible.filter(e => e.status === 'on_hold').length,
  }), [allVisible]);

  const filtered = useMemo(() => allVisible.filter(e => {
    if (statusFilter !== 'all' && e.status !== statusFilter) return false;
    if (assignee !== 'all' && !e.assigned.includes(assignee)) return false;
    if (search) {
      const q = search.toLowerCase();
      if (!e.name.toLowerCase().includes(q) && !e.client.toLowerCase().includes(q)) return false;
    }
    return true;
  }), [allVisible, statusFilter, assignee, search]);

  const clearFilters = () => { setStatusFilter('all'); setSearch(''); setAssignee('all'); };

  return (
    <div className="ck-page">
      <div className="ck-page__header">
        <div>
          <div className="ck-page__title">Engagements</div>
          <div className="ck-muted" style={{ marginTop: 5 }}>
            {counts.active} active{counts.hold > 0 && <> · {counts.hold} on hold</>}
          </div>
        </div>
        <Button onClick={() => setNewModal(true)}><Icon name="plus" size={14} /> New engagement</Button>
      </div>

      <div className="wts-filter-row">
        <Segmented options={STATUS_FILTER_OPTS} value={statusFilter} onChange={setStatusFilter} />
        <div style={{ flex: 1 }} />
        {(role === 'partner' || role === 'admin') && (
          <div className="wts-select-wrap">
            <Icon name="user" size={14} style={{ opacity: 0.4 }} />
            <select className="wts-select" value={assignee} onChange={e => setAssignee(e.target.value)}>
              <option value="all">All assignees</option>
              {staffOptions.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
            </select>
            <Icon name="chevron-down" size={13} style={{ opacity: 0.4 }} />
          </div>
        )}
        <div className="wts-search-wrap">
          <Icon name="search" size={14} style={{ opacity: 0.4 }} />
          <input className="wts-search" placeholder="Search engagements..." value={search} onChange={e => setSearch(e.target.value)} />
        </div>
      </div>

      <Card style={{ padding: 0, gap: 0 }}>
        <CardContent style={{ padding: 0 }}>
          {filtered.length === 0 ? (
            <div className="wts-empty">
              <div className="wts-empty__icon"><Icon name="inbox" size={20} style={{ opacity: 0.5 }} /></div>
              <div className="wts-empty__title">No engagements match your filters</div>
              <button type="button" className="wts-link wts-link--button" onClick={clearFilters}>Clear filters</button>
            </div>
          ) : (
            <table className="ck-table wts-engagements-table">
              <thead>
                <tr>
                  <th>Engagement</th>
                  <th style={{ width: 130 }}>Service line</th>
                  <th style={{ width: 180 }}>Required complete</th>
                  <th style={{ width: 120 }}>Deadline</th>
                  <th style={{ width: 100 }}>Assigned</th>
                  <th style={{ width: 100 }}>Status</th>
                  <th style={{ width: 32 }}></th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(e => {
                  const st = engagementStats(e.id);
                  const assigned = e.assigned.map(getUserById).filter(Boolean);
                  const overdue = getItemsForEngagement(e.id).filter(i => (i.status === 'pending' || i.status === 'change_requested') && isOverdue(i.deadline)).length;
                  const dueOverdue = isOverdue(e.deadline) && e.status !== 'completed';
                  return (
                    <tr key={e.id} className="wts-row-clickable" onClick={() => onOpenEngagement(e.id)}>
                      <td>
                        <div style={{ fontWeight: 500, color: 'var(--foreground)', fontSize: 13.5 }}>{e.name}</div>
                        <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)', marginTop: 2 }}>{e.client}</div>
                      </td>
                      <td><span className="ck-badge ck-badge--secondary">{serviceLineLabel(e.serviceLine)}</span></td>
                      <td>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                          <div style={{ flex: 1 }}><ProgressBar value={st.acceptedRequired} max={st.requiredTotal} /></div>
                          <span style={{ fontSize: 11.5, color: 'var(--muted-foreground)', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{st.acceptedRequired} / {st.requiredTotal}</span>
                        </div>
                        {(st.submitted > 0 || overdue > 0) && (
                          <div style={{ fontSize: 11, marginTop: 4, display: 'flex', gap: 8 }}>
                            {st.submitted > 0 && <span style={{ color: 'hsl(213 80% 40%)' }}>{st.submitted} to review</span>}
                            {overdue > 0 && <span style={{ color: 'var(--destructive)' }}>{overdue} overdue</span>}
                          </div>
                        )}
                      </td>
                      <td style={{ fontSize: 12.5, color: dueOverdue ? 'var(--destructive)' : 'var(--muted-foreground)', fontWeight: dueOverdue ? 500 : 400 }}>{formatDate(e.deadline, { day: 'numeric', month: 'short' })}</td>
                      <td><AvatarStack users={assigned} size={22} max={3} /></td>
                      <td><StatusBadge status={e.status} /></td>
                      <td><Icon name="chevron-right" size={15} style={{ opacity: 0.3 }} className="wts-row-chevron" /></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </CardContent>
      </Card>

      <NewEngagementModal open={newModal} onClose={() => setNewModal(false)} userId={userId} />
    </div>
  );
};

// ────────────────────────────────────────────────────────────────────────
// ENGAGEMENT DETAIL HEADER
// ────────────────────────────────────────────────────────────────────────
const EngagementHeader = ({ eng }) => {
  const toast = useToast();
  const client = getClientById(eng.clientId);
  const st = engagementStats(eng.id);
  const assigned = eng.assigned.map(getUserById).filter(Boolean);
  const overdue = getItemsForEngagement(eng.id).filter(i => (i.status === 'pending' || i.status === 'change_requested') && isOverdue(i.deadline)).length;
  const dueOverdue = isOverdue(eng.deadline) && eng.status !== 'completed';
  const pct = st.requiredTotal > 0 ? Math.round((st.acceptedRequired / st.requiredTotal) * 100) : 0;

  return (
    <div className="wts-eng-header">
      <div className="wts-eng-header__top">
        <div style={{ minWidth: 0 }}>
          <div className="wts-eng-header__title">{eng.name}</div>
          <div className="wts-eng-header__client">
            {eng.client} · {serviceLineLabel(eng.serviceLine)} · {eng.period}
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 10, flexShrink: 0 }}>
          <StatusBadge status={eng.status} />
          <Button variant="outline" size="sm" onClick={() => toast.success('Reminder sent', `Emailed ${eng.contactEmails.length} contact(s)`)}>
            <Icon name="bell" size={13} /> Remind client
          </Button>
        </div>
      </div>
      <div className="wts-metric-row">
        <div className="wts-metric">
          <div className="wts-metric__label">Required complete</div>
          <div className="wts-metric__value">{st.acceptedRequired} <span style={{ color: 'var(--muted-foreground)', fontWeight: 400 }}>/ {st.requiredTotal}</span></div>
          <div className="wts-metric__sub">{pct}% accepted</div>
        </div>
        <div className="wts-metric">
          <div className="wts-metric__label">Awaiting review</div>
          <div className="wts-metric__value" style={{ color: st.submitted > 0 ? 'hsl(213 80% 38%)' : 'var(--foreground)' }}>{st.submitted}</div>
        </div>
        <div className="wts-metric">
          <div className="wts-metric__label">Outstanding</div>
          <div className="wts-metric__value">
            {st.outstanding}
            {overdue > 0 && <span style={{ color: 'var(--destructive)', fontSize: 13, fontWeight: 500, marginLeft: 8 }}>{overdue} overdue</span>}
          </div>
        </div>
        <div className="wts-metric">
          <div className="wts-metric__label">Client deadline</div>
          <div className="wts-metric__value-sm" style={{ color: dueOverdue ? 'var(--destructive)' : 'var(--foreground)' }}>{formatDate(eng.deadline)}</div>
        </div>
        <div className="wts-metric" style={{ alignItems: 'flex-end' }}>
          <div className="wts-metric__label" style={{ alignSelf: 'flex-end' }}>Assigned</div>
          <AvatarStack users={assigned} size={26} max={4} />
        </div>
      </div>
    </div>
  );
};

Object.assign(window, {
  EngagementsList, EngagementHeader, NewEngagementModal,
  STATUS_FILTER_OPTS, visibleEngagementsForRole,
});