import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { useApp } from '@modelcontextprotocol/ext-apps/react';

function App() {
  const app = useApp();
  const [orgId, setOrgId] = useState('');
  const [org, setOrg] = useState<any>(null);
  const [members, setMembers] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  async function loadOrg() {
    if (!orgId) return;
    try {
      setLoading(true);
      const [orgResult, membersResult] = await Promise.all([
        app.callTool('zendesk_get_organization', { organization_id: parseInt(orgId) }),
        app.callTool('zendesk_list_organization_memberships', { organization_id: parseInt(orgId) })
      ]);
      const orgData = JSON.parse(orgResult.content[0].text);
      const membersData = JSON.parse(membersResult.content[0].text);
      setOrg(orgData);
      setMembers(membersData.organization_memberships || []);
    } finally { setLoading(false); }
  }

  return (
    <div style={{ padding: 20, fontFamily: 'sans-serif' }}>
      <h1>Organization Detail</h1>
      <div style={{ marginBottom: 20 }}>
        <input type="text" value={orgId} onChange={e => setOrgId(e.target.value)}
          onKeyPress={e => e.key === 'Enter' && loadOrg()}
          placeholder="Organization ID" style={{ padding: 8, width: 200, marginRight: 8 }} />
        <button onClick={loadOrg} disabled={loading} style={{ padding: 8 }}>
          {loading ? 'Loading...' : 'Load'}
        </button>
      </div>
      {org && (
        <div>
          <div style={{ background: '#f8f9fa', padding: 20, borderRadius: 8, marginBottom: 20 }}>
            <h2 style={{ margin: 0, marginBottom: 12 }}>{org.name}</h2>
            <div><strong>ID:</strong> #{org.id}</div>
            {org.domain_names?.length > 0 && <div><strong>Domains:</strong> {org.domain_names.join(', ')}</div>}
            {org.details && <div style={{ marginTop: 8 }}><strong>Details:</strong> {org.details}</div>}
            {org.tags?.length > 0 && <div style={{ marginTop: 8 }}><strong>Tags:</strong> {org.tags.join(', ')}</div>}
          </div>
          <h3>Members ({members.length})</h3>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead><tr style={{ background: '#f5f5f5' }}>
              <th style={{ padding: 12, textAlign: 'left' }}>User ID</th>
              <th style={{ padding: 12, textAlign: 'left' }}>Default</th>
              <th style={{ padding: 12, textAlign: 'left' }}>Created</th>
            </tr></thead>
            <tbody>{members.map(m => (
              <tr key={m.id} style={{ borderBottom: '1px solid #eee' }}>
                <td style={{ padding: 12 }}>#{m.user_id}</td>
                <td style={{ padding: 12 }}>{m.default ? '✓' : ''}</td>
                <td style={{ padding: 12 }}>{new Date(m.created_at).toLocaleDateString()}</td>
              </tr>
            ))}</tbody>
          </table>
        </div>
      )}
    </div>
  );
}

createRoot(document.getElementById('root')!).render(<App />);
