import { useState } from 'react';
import { useMeetings, useMeeting, useSchedule, useConsent, useSummarize, useActionItems } from '@insignia/iios-meeting-web';

export const SERVICE = 'http://localhost:3200';

const box: React.CSSProperties = { border: '1px solid #e5e7eb', borderRadius: 8, padding: 16, marginBottom: 16 };
const CONSENT_COLORS: Record<string, string> = { GRANTED: '#16a34a', UNKNOWN: '#d97706', DENIED: '#dc2626', REVOKED: '#dc2626' };

export function App({ token: _token }: { token: string }) {
  const { meetings, refresh } = useMeetings({ pollMs: 3000 });
  const schedule = useSchedule();
  const { setConsent, generateTranscript } = useConsent();
  const summarize = useSummarize();

  const [selected, setSelected] = useState<string | null>(null);
  const [title, setTitle] = useState('Design review');
  const [attendee, setAttendee] = useState('bob');
  const [busy, setBusy] = useState('');

  const { meeting, refresh: refreshMeeting } = useMeeting(selected);
  const { actionItems, refresh: refreshItems } = useActionItems(selected);

  const doSchedule = async () => {
    setBusy('scheduling…');
    const m = await schedule({
      meetingType: 'INTERNAL',
      title,
      startAt: '2026-07-02T10:00:00.000Z',
      attendees: [{ userId: attendee, displayName: attendee }],
    });
    setSelected(m.id);
    await refresh();
    setBusy('');
  };

  const refreshAll = async () => {
    await refreshMeeting();
    await refreshItems();
  };

  return (
    <div style={{ padding: 24, fontFamily: 'sans-serif', maxWidth: 900, margin: '0 auto' }}>
      <h2>IIOS P8 — Meeting Studio</h2>
      <p style={{ color: '#666' }}>
        A meeting owns calendar semantics. No transcript/summary/action-item exists until <b>every</b> attendee grants recording consent (KG-14).
      </p>

      <div style={box}>
        <h3>1 · Schedule a meeting</h3>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="title" />
          <input value={attendee} onChange={(e) => setAttendee(e.target.value)} placeholder="attendee userId" style={{ width: 140 }} />
          <button onClick={() => void doSchedule()}>Schedule</button>
          {busy && <span style={{ color: '#666' }}>{busy}</span>}
        </div>
        <ul>
          {meetings.map((m) => (
            <li key={m.id}>
              <button onClick={() => setSelected(m.id)} style={{ fontWeight: selected === m.id ? 700 : 400 }}>
                {m.title} — {m.status}
              </button>
            </li>
          ))}
        </ul>
      </div>

      {meeting && (
        <div style={box}>
          <h3>2 · {meeting.title} — consent & transcript</h3>
          <table style={{ borderCollapse: 'collapse' }}>
            <tbody>
              {(meeting.participants ?? []).map((p) => (
                <tr key={p.id}>
                  <td style={{ padding: '4px 8px' }}>{p.role} · {p.actorRefId?.slice(0, 8)}</td>
                  <td style={{ padding: '4px 8px', color: CONSENT_COLORS[p.recordingConsent] }}>{p.recordingConsent}</td>
                  <td style={{ padding: '4px 8px', color: '#888' }}>visibility {p.visibility}</td>
                  <td style={{ padding: '4px 8px' }}>
                    <button onClick={async () => { await setConsent(meeting.id, p.actorRefId!, 'GRANTED'); await refreshAll(); }}>Grant</button>
                    <button onClick={async () => { await setConsent(meeting.id, p.actorRefId!, 'REVOKED'); await refreshAll(); }} style={{ marginLeft: 4 }}>Revoke</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
            <button onClick={async () => { await generateTranscript(meeting.id); await refreshAll(); setBusy('transcript attempted — grant all consent for READY'); }}>
              Generate transcript
            </button>
            <button onClick={async () => { setBusy('summarizing…'); try { await summarize(meeting.id); setBusy(''); } catch (e) { setBusy(`blocked: ${(e as Error).message}`); } await refreshAll(); }}>
              Summarize (needs consent)
            </button>
          </div>
          {busy && <p style={{ color: '#666' }}>{busy}</p>}
        </div>
      )}

      {meeting && (
        <div style={box}>
          <h3>3 · Action items (inbox follow-ups)</h3>
          {actionItems.length === 0 && <p style={{ color: '#666' }}>None yet — summarize a consented meeting.</p>}
          <ul>
            {actionItems.map((a) => (
              <li key={a.id}>{a.actionItem?.title ?? a.actionItemId} — {a.status}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}