// WTS Cyprus — PBC: Engagement detail (request items, item drawer, activity, settings)
const { useState: useStateD, useMemo: useMemoD, useEffect: useEffectD } = React;

const ITEM_FILTERS = [
  { value: 'all',              label: 'All' },
  { value: 'pending',          label: 'Pending' },
  { value: 'submitted',        label: 'To review' },
  { value: 'change_requested', label: 'Changes' },
  { value: 'accepted',         label: 'Accepted' },
];

// ── Type-aware read view of a submitted value (staff + portal share) ───────
const ItemValueView = ({ item }) => {
  const v = item.value;
  if (!v) return <span style={{ fontSize: 13, color: 'var(--muted-foreground)' }}>No submission yet.</span>;
  switch (item.type) {
    case 'file':
      return (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {(v.files || []).map((f, i) => (
            <span key={i} className="wts-attach-chip wts-attach-chip--lg"><Icon name="file" size={12} /> {f}</span>
          ))}
        </div>
      );
    case 'number':   return <span className="wts-value-num">{Number(v.number).toLocaleString('en-GB')}</span>;
    case 'currency': return <span className="wts-value-num">{v.currency || 'EUR'} {Number(v.amount).toLocaleString('en-GB')}</span>;
    case 'date':     return <span className="wts-value-num">{formatDate(v.date)}</span>;
    case 'boolean':  return <span className={cn('ck-badge', v.bool ? 'wts-badge-success' : 'ck-badge--outline')}>{v.bool ? 'Yes' : 'No'}</span>;
    case 'multichoice': return <span className="ck-badge ck-badge--secondary">{v.choice}</span>;
    case 'freetext': return <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--foreground)', margin: 0 }}>{v.text}</p>;
    case 'table':
      if (Array.isArray(v.rows)) {
        return (
          <div style={{ border: '1px solid var(--border)', borderRadius: 7, overflow: 'hidden' }}>
            <table className="ck-table" style={{ fontSize: 12.5 }}>
              <thead><tr>{(item.columns || []).map(c => <th key={c}>{c}</th>)}</tr></thead>
              <tbody>{v.rows.map((r, i) => <tr key={i}>{r.map((cell, j) => <td key={j} style={{ fontVariantNumeric: 'tabular-nums' }}>{cell}</td>)}</tr>)}</tbody>
            </table>
          </div>
        );
      }
      return <span style={{ fontSize: 13 }}>{v.rows} rows submitted</span>;
    default: return null;
  }
};

// ── Request items tab ─────────────────────────────────────────────────────
const ItemsTab = ({ eng, items, onOpenItem, onAddItem }) => {
  const [filter, setFilter] = useStateD('all');
  const [addOpen, setAddOpen] = useStateD(false);
  const [label, setLabel] = useStateD('');
  const [type, setType] = useStateD('file');
  const [required, setRequired] = useStateD(true);
  const toast = useToast();

  const filtered = useMemoD(() => filter === 'all' ? items : items.filter(i => i.status === filter), [items, filter]);
  const filterOptions = useMemoD(() => ITEM_FILTERS.map(f => ({ ...f, count: f.value === 'all' ? items.length : items.filter(i => i.status === f.value).length })), [items]);

  const submit = () => {
    if (!label.trim()) return;
    onAddItem({ label: label.trim(), type, required });
    setLabel(''); setType('file'); setRequired(true); setAddOpen(false);
    toast.success('Request item added', 'Client portal updated');
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div className="wts-filter-row" style={{ gap: 10 }}>
        <Segmented options={filterOptions} value={filter} onChange={setFilter} />
      </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="list-checks" size={20} style={{ opacity: 0.5 }} /></div>
              <div className="wts-empty__title">No items in this view</div>
            </div>
          ) : (
            <table className="ck-table wts-asks-table">
              <thead>
                <tr>
                  <th style={{ width: 140 }}>Status</th>
                  <th>Request item</th>
                  <th style={{ width: 120 }}>Type</th>
                  <th style={{ width: 200 }}>Submitted</th>
                  <th style={{ width: 110 }}>Deadline</th>
                  <th style={{ width: 36 }}></th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(item => {
                  const meta = ITEM_TYPE_META[item.type];
                  const overdue = (item.status === 'pending' || item.status === 'change_requested') && isOverdue(item.deadline);
                  const summary = itemValueSummary(item);
                  return (
                    <tr key={item.id} className="wts-row-clickable" onClick={() => onOpenItem(item.id)}>
                      <td><StatusBadge status={item.status} /></td>
                      <td>
                        <div style={{ fontWeight: 500, color: 'var(--foreground)', fontSize: 13.5, lineHeight: 1.4 }}>
                          {item.label}{item.required && <span style={{ color: 'hsl(0 72% 50%)', marginLeft: 4 }}>*</span>}
                        </div>
                        {item.comments.length > 0 && (
                          <span className="wts-mini-tag" style={{ background: 'hsl(220 14% 95%)', color: 'var(--muted-foreground)', marginTop: 4 }}>
                            <Icon name="message-circle" size={10} /> {item.comments.length}
                          </span>
                        )}
                      </td>
                      <td>
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, color: 'var(--muted-foreground)' }}>
                          <Icon name={meta.icon} size={13} style={{ opacity: 0.6 }} /> {meta.label}
                        </span>
                      </td>
                      <td style={{ fontSize: 12.5, color: summary ? 'var(--foreground)' : 'var(--muted-foreground)', maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                        {summary || '—'}
                      </td>
                      <td style={{ fontSize: 12.5, color: overdue ? 'var(--destructive)' : 'var(--muted-foreground)', fontWeight: overdue ? 500 : 400 }}>{formatDate(item.deadline, { day: 'numeric', month: 'short' })}</td>
                      <td><Icon name="chevron-right" size={15} style={{ opacity: 0.3 }} className="wts-row-chevron" /></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
          <div style={{ padding: '14px 22px 16px', borderTop: filtered.length > 0 ? '1px solid var(--border)' : 'none' }}>
            {addOpen ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <Input placeholder="Item label, e.g. “Aged creditor analysis”" value={label} onChange={e => setLabel(e.target.value)} autoFocus />
                <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
                  <select className="wts-input" value={type} onChange={e => setType(e.target.value)} style={{ width: 'auto', height: 32 }}>
                    {Object.entries(ITEM_TYPE_META).map(([k, m]) => <option key={k} value={k}>{m.label}</option>)}
                  </select>
                  <label className="wts-check"><input type="checkbox" checked={required} onChange={e => setRequired(e.target.checked)} /><span>Required</span></label>
                  <div style={{ flex: 1 }} />
                  <Button variant="outline" size="sm" onClick={() => { setAddOpen(false); setLabel(''); }}>Cancel</Button>
                  <Button size="sm" onClick={submit} disabled={!label.trim()}>Add item</Button>
                </div>
              </div>
            ) : (
              <button type="button" className="wts-add-manual" onClick={() => setAddOpen(true)}>
                <Icon name="plus" size={13} /> Add request item
              </button>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

// ── Request item drawer ───────────────────────────────────────────────────
const RequestItemPanel = ({ item, eng, onClose, onUpdate }) => {
  const toast = useToast();
  const [changeMode, setChangeMode] = useStateD(false);
  const [changeReason, setChangeReason] = useStateD('');
  const [comment, setComment] = useStateD('');
  const meta = ITEM_TYPE_META[item.type];

  useEffectD(() => { setChangeMode(false); setChangeReason(''); setComment(''); }, [item.id]);

  const accept = () => {
    onUpdate({ ...item, status: 'accepted' });
    toast.success('Item accepted', item.label);
  };
  const requestChange = () => {
    if (!changeReason.trim()) return;
    onUpdate({ ...item, status: 'change_requested', changeReason: changeReason.trim(),
      comments: [...item.comments, { author: 'You (WTS)', role: 'staff', at: '2025-05-16', text: changeReason.trim() }] });
    toast.info('Change requested', 'Client notified to re-submit');
    setChangeMode(false); setChangeReason('');
  };
  const addComment = () => {
    if (!comment.trim()) return;
    onUpdate({ ...item, comments: [...item.comments, { author: 'You (WTS)', role: 'staff', at: '2025-05-16', text: comment.trim() }] });
    setComment('');
  };

  return (
    <div className="wts-panel">
      <div className="wts-panel__header">
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 }}>
          <StatusBadge status={item.status} />
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, color: 'var(--muted-foreground)' }}>
            <Icon name={meta.icon} size={12} style={{ opacity: 0.6 }} /> {meta.label}
          </span>
        </div>
        <button type="button" className="wts-icon-btn" onClick={onClose} aria-label="Close"><Icon name="x" size={15} /></button>
      </div>

      <div className="wts-panel__body">
        <div style={{ fontSize: 17, fontWeight: 600, lineHeight: 1.35, letterSpacing: '-0.01em' }}>
          {item.label}{item.required && <span style={{ color: 'hsl(0 72% 50%)', marginLeft: 4 }}>*</span>}
        </div>
        {item.description && <p style={{ fontSize: 13, color: 'var(--muted-foreground)', lineHeight: 1.55, marginTop: 6 }}>{item.description}</p>}
        <div style={{ display: 'flex', gap: 16, marginTop: 10, fontSize: 12, color: 'var(--muted-foreground)' }}>
          <span>{item.required ? 'Required' : 'Optional'}</span>
          <span>Deadline {formatDate(item.deadline, { day: 'numeric', month: 'short' })}</span>
        </div>

        {item.status === 'change_requested' && item.changeReason && (
          <div style={{ marginTop: 14, padding: '10px 12px', background: 'hsl(38 95% 97%)', border: '1px solid hsl(38 90% 86%)', borderRadius: 8 }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'hsl(28 90% 35%)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>Change requested</div>
            <div style={{ fontSize: 12.5, color: 'hsl(0 0% 25%)', lineHeight: 1.5 }}>{item.changeReason}</div>
          </div>
        )}

        <section className="wts-panel__section">
          <div className="wts-panel__section-label">Latest submission</div>
          <ItemValueView item={item} />
        </section>

        {item.versions.length > 0 && (
          <section className="wts-panel__section">
            <div className="wts-panel__section-label">Submission history</div>
            <div className="wts-timeline">
              {item.versions.slice().reverse().map((ver, i) => (
                <div key={i} className="wts-timeline__item">
                  <div className="wts-timeline__dot"><span style={{ fontSize: 10, fontWeight: 600, fontFamily: 'var(--font-mono)' }}>v{ver.v}</span></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5 }}>Submitted by {ver.by}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--muted-foreground)', marginTop: 1 }}>{formatDate(ver.at)}</div>
                    {ver.note && <div style={{ fontSize: 12, color: 'hsl(0 0% 35%)', marginTop: 3, fontStyle: 'italic' }}>“{ver.note}”</div>}
                  </div>
                </div>
              ))}
            </div>
          </section>
        )}

        <section className="wts-panel__section">
          <div className="wts-panel__section-label">Comments</div>
          {item.comments.length === 0 ? (
            <span style={{ fontSize: 12.5, color: 'var(--muted-foreground)' }}>No comments yet.</span>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {item.comments.map((c, i) => (
                <div key={i} style={{ display: 'flex', gap: 9 }}>
                  <span style={{ width: 24, height: 24, borderRadius: '50%', flexShrink: 0, display: 'grid', placeItems: 'center', background: c.role === 'staff' ? 'hsl(213 70% 92%)' : 'hsl(28 80% 93%)', color: c.role === 'staff' ? 'hsl(213 70% 32%)' : 'hsl(28 80% 32%)' }}>
                    <Icon name={c.role === 'staff' ? 'briefcase' : 'user'} size={12} />
                  </span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5 }}><strong>{c.author}</strong> <span style={{ color: 'var(--muted-foreground)' }}>· {formatDate(c.at, { day: 'numeric', month: 'short' })}</span></div>
                    <div style={{ fontSize: 13, lineHeight: 1.5, marginTop: 2 }}>{c.text}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <Input placeholder="Add a comment…" value={comment} onChange={e => setComment(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') addComment(); }} />
            <Button variant="outline" size="sm" onClick={addComment} disabled={!comment.trim()}>Send</Button>
          </div>
        </section>
      </div>

      <div className="wts-panel__footer">
        {item.status === 'submitted' && !changeMode && (
          <>
            <Button onClick={accept}><Icon name="check" size={14} /> Accept</Button>
            <Button variant="outline" onClick={() => setChangeMode(true)}><Icon name="rotate-ccw" size={13} /> Request change</Button>
          </>
        )}
        {item.status === 'submitted' && changeMode && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%' }}>
            <Textarea placeholder="Explain what needs to change. The client sees this and re-submits." value={changeReason} onChange={e => setChangeReason(e.target.value)} style={{ minHeight: 64 }} autoFocus />
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <Button variant="outline" size="sm" onClick={() => setChangeMode(false)}>Cancel</Button>
              <Button size="sm" onClick={requestChange} disabled={!changeReason.trim()}>Send change request</Button>
            </div>
          </div>
        )}
        {item.status === 'accepted' && (
          <>
            <span style={{ fontSize: 13, color: 'hsl(142 55% 30%)', display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 500 }}><Icon name="check-circle-2" size={15} /> Accepted</span>
            <div style={{ flex: 1 }} />
            <Button variant="ghost" size="sm" onClick={() => { onUpdate({ ...item, status: 'submitted' }); toast.info('Re-opened for review'); }}>Re-open</Button>
          </>
        )}
        {item.status === 'change_requested' && (
          <span style={{ fontSize: 13, color: 'hsl(28 90% 35%)', display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon name="clock" size={14} /> Awaiting client re-submission</span>
        )}
        {item.status === 'pending' && (
          <>
            <span style={{ fontSize: 13, color: 'var(--muted-foreground)', display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon name="clock" size={14} /> Awaiting client submission</span>
            <div style={{ flex: 1 }} />
            <Button variant="outline" size="sm" onClick={() => toast.success('Reminder sent', eng.contactEmails[0])}><Icon name="bell" size={13} /> Remind</Button>
          </>
        )}
      </div>
    </div>
  );
};

// ── Activity tab (derived from item events) ───────────────────────────────
const ActivityTab = ({ items }) => {
  const events = useMemoD(() => {
    const evs = [];
    items.forEach(it => {
      it.versions.forEach(v => evs.push({ at: v.at, icon: 'inbox', color: 'hsl(213 90% 94%)', text: `“${it.label}” submitted (v${v.v}) by ${v.by}` }));
      if (it.status === 'accepted') evs.push({ at: it.versions[0]?.at || it.deadline, icon: 'circle-check', color: 'hsl(142 60% 93%)', text: `“${it.label}” accepted by WTS` });
      if (it.status === 'change_requested') evs.push({ at: it.deadline, icon: 'rotate-ccw', color: 'hsl(38 95% 93%)', text: `Change requested on “${it.label}”` });
      it.comments.forEach(c => evs.push({ at: c.at, icon: 'message-circle', color: 'hsl(0 0% 93%)', text: `${c.author} commented on “${it.label}”` }));
    });
    return evs.sort((a, b) => new Date(b.at) - new Date(a.at));
  }, [items]);

  return (
    <Card style={{ padding: 0, gap: 0 }}>
      <CardContent style={{ padding: 0 }}>
        <ul className="wts-activity" style={{ padding: '6px 0' }}>
          {events.map((ev, i) => (
            <li key={i} className="wts-activity-item">
              <span className="wts-activity-icon" style={{ background: ev.color }}><Icon name={ev.icon} size={13} style={{ opacity: 0.9 }} /></span>
              <div style={{ flex: 1, minWidth: 0 }}><span style={{ fontSize: 13, lineHeight: 1.45 }}>{ev.text}</span></div>
              <span style={{ fontSize: 11.5, color: 'var(--muted-foreground)', whiteSpace: 'nowrap', flexShrink: 0, paddingLeft: 12 }}>{formatDate(ev.at, { day: 'numeric', month: 'short' })}</span>
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  );
};

// ── Settings tab ──────────────────────────────────────────────────────────
const SettingsTab = ({ eng }) => {
  const toast = useToast();
  const client = getClientById(eng.clientId);
  const [name, setName] = useStateD(eng.name);
  const [deadline, setDeadline] = useStateD(eng.deadline);
  const [assigned, setAssigned] = useStateD(eng.assigned);
  const [cadence, setCadence] = useStateD('weekly');
  const [archived, setArchived] = useStateD(eng.status === 'archived');
  const allStaff = useMemoD(() => USERS.filter(u => u.role === 'staff' || u.role === 'partner'), []);
  const available = allStaff.filter(u => !assigned.includes(u.id));

  return (
    <Card>
      <CardContent>
        <div className="wts-form">
          <div className="wts-field"><Label>Engagement name</Label><Input value={name} onChange={e => setName(e.target.value)} /></div>
          <div className="wts-cols-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div className="wts-field"><Label>Client (from registry)</Label><Input value={client?.legalName || eng.client} readOnly style={{ background: 'hsl(220 14% 98%)', color: 'var(--muted-foreground)' }} /></div>
            <div className="wts-field"><Label>Service line</Label><Input value={serviceLineLabel(eng.serviceLine)} readOnly style={{ background: 'hsl(220 14% 98%)', color: 'var(--muted-foreground)' }} /></div>
          </div>
          <div className="wts-cols-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div className="wts-field"><Label>Period</Label><Input value={eng.period} readOnly style={{ background: 'hsl(220 14% 98%)', color: 'var(--muted-foreground)' }} /></div>
            <div className="wts-field"><Label>Client deadline</Label><input type="date" className="wts-input" value={deadline} onChange={e => setDeadline(e.target.value)} /></div>
          </div>
          <div className="wts-field">
            <Label>Assigned staff</Label>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {assigned.map(uid => {
                const u = getUserById(uid); if (!u) return null;
                return (
                  <span key={uid} className="wts-chip-assigned">
                    <Avatar user={u} size={20} /> {u.name}
                    <button type="button" className="wts-chip-x" onClick={() => setAssigned(xs => xs.filter(x => x !== uid))} aria-label="Remove"><Icon name="x" size={11} /></button>
                  </span>
                );
              })}
              {available.length > 0 && (
                <select className="wts-select" value="" onChange={e => { if (e.target.value) setAssigned(xs => [...xs, e.target.value]); }} style={{ width: 'auto', paddingRight: 26 }}>
                  <option value="">+ Add staff</option>
                  {available.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
                </select>
              )}
            </div>
          </div>
          <div className="wts-field">
            <Label>Reminder cadence</Label>
            <div style={{ maxWidth: 260 }}>
              <Segmented options={[{ value: 'off', label: 'Off' }, { value: 'weekly', label: 'Weekly' }, { value: 'twice', label: 'Twice / week' }]} value={cadence} onChange={setCadence} />
            </div>
            <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 6 }}>Automatic reminders fire before, on, and after each item deadline.</div>
          </div>
          <div className="wts-field" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <Label>Archive engagement</Label>
              <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)', marginTop: 2 }}>Archived engagements are read-only and excluded from KPIs.</div>
            </div>
            <Switch checked={archived} onChange={setArchived} />
          </div>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', paddingTop: 8 }}>
            <Button onClick={() => toast.success('Settings saved')}>Save changes</Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

// ── Engagement detail (composes header + tabs + drawer) ───────────────────
const TAB_DEFS = [
  { id: 'items',    label: 'Request items', icon: 'list-checks' },
  { id: 'activity', label: 'Activity',      icon: 'activity' },
  { id: 'settings', label: 'Settings',      icon: 'settings' },
];

const EngagementDetail = ({ eng, initialTab = 'items' }) => {
  const [tab, setTab] = useStateD(initialTab);
  const [overrides, setOverrides] = useStateD({});
  const [extra, setExtra] = useStateD([]);
  const [openItemId, setOpenItemId] = useStateD(null);

  const items = useMemoD(() => {
    const base = getItemsForEngagement(eng.id).map(i => overrides[i.id] || i);
    return [...base, ...extra];
  }, [eng.id, overrides, extra]);

  const updateItem = (ni) => setOverrides(o => ({ ...o, [ni.id]: ni }));
  const addItem = (data) => {
    const id = `i-new-${Date.now()}`;
    setExtra(xs => [...xs, {
      id, engagementId: eng.id, order: 99 + xs.length, label: data.label, type: data.type, required: data.required,
      deadline: eng.deadline, status: 'pending', value: null, versions: [], comments: [],
      columns: data.type === 'table' ? ['Column 1', 'Column 2'] : undefined,
      options: data.type === 'multichoice' ? ['Option A', 'Option B'] : undefined, description: '',
    }]);
  };

  const openItem = items.find(i => i.id === openItemId);

  return (
    <div className="ck-page">
      <EngagementHeader eng={eng} />
      <div className="wts-tabs">
        {TAB_DEFS.map(t => (
          <button key={t.id} type="button" data-active={tab === t.id} className="wts-tab" onClick={() => setTab(t.id)}>
            <Icon name={t.icon} size={13} style={{ opacity: 0.65 }} /> {t.label}
          </button>
        ))}
      </div>
      <div>
        {tab === 'items'    && <ItemsTab eng={eng} items={items} onOpenItem={setOpenItemId} onAddItem={addItem} />}
        {tab === 'activity' && <ActivityTab items={items} />}
        {tab === 'settings' && <SettingsTab eng={eng} />}
      </div>

      <Drawer open={!!openItem} onClose={() => setOpenItemId(null)} width={500}>
        {openItem && <RequestItemPanel item={openItem} eng={eng} onClose={() => setOpenItemId(null)} onUpdate={updateItem} />}
      </Drawer>
    </div>
  );
};

Object.assign(window, { EngagementDetail, ItemValueView, RequestItemPanel });