// DEPLOY_CONFIG: {"triggers": [{"name": "notify_on_call_when_bug_becomes_critical", "on": "collection.update", "collection": "bugs", "actions": [{"type": "email", "to": "{{bug.on_call_email}}", "subject": "Critical bug alert: {{bug.title}}", "body": "Bug \"{{bug.title}}\" has been updated to critical severity.\n\nBug ID: {{bug.id}}\nSeverity: {{bug.severity}}\nStatus: {{bug.status}}\nReporter: {{bug.reporter_email}}\n\nPlease review immediately."}]}, {"name": "notify_reporter_when_bug_fixed", "on": "collection.update", "collection": "bugs", "actions": [{"type": "email", "to": "{{bug.reporter_email}}", "subject": "Bug fixed: {{bug.title}}", "body": "Your reported bug \"{{bug.title}}\" has been marked as fixed.\n\nBug ID: {{bug.id}}\nSeverity: {{bug.severity}}\nStatus: {{bug.status}}\n\nThanks for reporting it."}]}]}
import { useState } from 'react';
import { useAI, useAuth, useCollection, usePresence } from '@deplixo/sdk';
import { KanbanBoard } from './components/KanbanBoard.jsx';
import { BugForm } from './components/BugForm.jsx';
import { BugDetail } from './components/BugDetail.jsx';
import { FilterBar } from './components/FilterBar.jsx';

function App() {
  const { user, loading: authLoading, login, logout } = useAuth();
  const [showForm, setShowForm] = useState(false);
  const [editBug, setEditBug] = useState(null);
  const [viewBug, setViewBug] = useState(null);
  const [severityFilter, setSeverityFilter] = useState('all');
  const { items, loading, add, update, remove } = useCollection('bugs', { personal: true });
  const { add: saveIdentity } = useCollection('auth-identities', { personal: true });
  const { generate: generateAI } = useAI();
  const { update: updatePresence } = usePresence(
    user
      ? {
          name: user.name,
          avatar: user.avatar,
          status: viewBug ? `Viewing bug ${viewBug.id}` : 'Online',
        }
      : {}
  );

  const handleSignIn = async () => {
    await login('google');
  };

  const handleSaveIdentity = async () => {
    if (!user) return;

    const identity = {
      userId: user.id,
      name: user.name,
      email: user.email,
      avatar: user.avatar,
      provider: 'google',
      signedInAt: Date.now(),
    };

    await saveIdentity(identity);
  };

  const inferCategory = async (bugData) => {
    const title = bugData?.title || '';
    const description = bugData?.description || '';
    const existingCategory = bugData?.category || '';

    if (!title && !description) {
      return existingCategory || 'General';
    }

    try {
      const result = await generateAI({
        system: 'You infer the best bug category from a title and description. Return only JSON with a single key category. Choose a short category name such as UI, Backend, Performance, Security, Data, Integration, Auth, Mobile, Accessibility, or General.',
        user: JSON.stringify({ title, description, existingCategory }),
        json: true,
      });

      const rawCategory = result && typeof result === 'object' ? result.category : '';
      const category = typeof rawCategory === 'string' ? rawCategory.trim() : '';
      return category || existingCategory || 'General';
    } catch (error) {
      return existingCategory || 'General';
    }
  };

  if (authLoading) return <div className="auth-gate">Signing in...</div>;

  if (!user) {
    return (
      <div className="auth-gate">
        <div className="auth-card">
          <div className="auth-badge">Team Access</div>
          <h1>🪲 Bug Tracker</h1>
          <p>Sign in with Google to create, review, and manage team bugs.</p>
          <button className="btn-primary auth-button" onClick={handleSignIn}>
            Continue with Google
          </button>
        </div>
      </div>
    );
  }

  handleSaveIdentity();

  const handleSave = async (bugData) => {
    const category = await inferCategory(bugData);
    const finalBugData = { ...bugData, category };

    if (editBug) {
      await update(editBug.id, finalBugData);
    } else {
      await add({ ...finalBugData, status: 'new', createdAt: Date.now(), createdBy: user.id, createdByName: user.name });
    }
    setShowForm(false);
    setEditBug(null);
  };

  const handleStatusChange = async (bugId, newStatus) => {
    const bug = items.find(i => i.id === bugId);
    if (bug) await update(bugId, { ...bug.value, status: newStatus });
  };

  const handleEdit = (bug) => {
    setEditBug(bug);
    setShowForm(true);
    setViewBug(null);
    updatePresence({
      name: user.name,
      avatar: user.avatar,
      status: 'Online',
    });
  };

  const handleDelete = async (bugId) => {
    await remove(bugId);
    setViewBug(null);
  };

  const handleViewBug = (bug) => {
    setViewBug(bug);
    updatePresence({
      name: user.name,
      avatar: user.avatar,
      status: `Viewing bug ${bug.id}`,
    });
  };

  const handleCloseBugDetail = () => {
    setViewBug(null);
    updatePresence({
      name: user.name,
      avatar: user.avatar,
      status: 'Online',
    });
  };

  const filteredItems = severityFilter === 'all'
    ? items
    : items.filter(i => i.value.severity === severityFilter);

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-left">
          <h1 className="app-title">🪲 Bug Tracker</h1>
          <span className="bug-count">{items.length} bug{items.length !== 1 ? 's' : ''}</span>
        </div>
        <div className="header-right">
          <div className="user-chip">
            {user.avatar ? <img className="user-avatar" src={user.avatar} alt={user.name} /> : null}
            <span className="user-name">{user.name}</span>
          </div>
          <button className="btn-secondary" onClick={logout}>Sign Out</button>
          <button className="btn-primary" onClick={() => { setEditBug(null); setShowForm(true); }}>
            + Report Bug
          </button>
        </div>
      </header>
      <FilterBar severityFilter={severityFilter} setSeverityFilter={setSeverityFilter} items={items} />
      <KanbanBoard
        items={filteredItems}
        loading={loading}
        onStatusChange={handleStatusChange}
        onView={handleViewBug}
      />
      {showForm && (
        <BugForm
          bug={editBug}
          onSave={handleSave}
          onClose={() => { setShowForm(false); setEditBug(null); }}
        />
      )}
      {viewBug && (
        <BugDetail
          bug={viewBug}
          onClose={handleCloseBugDetail}
          onEdit={handleEdit}
          onDelete={handleDelete}
          onStatusChange={handleStatusChange}
        />
      )}
    </div>
  );
}


function RichTextToolbar({ editorRef, onChange }) {
  const exec = (command, value = null) => {
    document.execCommand(command, false, value);
    if (editorRef?.current) editorRef.current.focus();
    if (onChange) onChange();
  };

  const insertLink = () => {
    const url = window.prompt('Enter a URL');
    if (!url) return;
    exec('createLink', url);
  };

  return (
    <div className="rich-toolbar" role="toolbar" aria-label="Rich text formatting toolbar">
      <button type="button" className="rich-tool-button" onClick={() => exec('bold')}><strong>B</strong></button>
      <button type="button" className="rich-tool-button" onClick={() => exec('italic')}><em>I</em></button>
      <button type="button" className="rich-tool-button" onClick={() => exec('underline')}><u>U</u></button>
      <button type="button" className="rich-tool-button" onClick={() => exec('insertUnorderedList')}>• List</button>
      <button type="button" className="rich-tool-button" onClick={() => exec('insertOrderedList')}>1. List</button>
      <button type="button" className="rich-tool-button" onClick={insertLink}>Link</button>
    </div>
  );
}


function BugViewers({ viewers }) {
  const visibleViewers = Array.isArray(viewers) ? viewers.filter(Boolean) : [];

  if (!visibleViewers.length) {
    return (
      <div className="bug-viewers">
        <div className="bug-viewers-label">Currently viewing</div>
        <div className="bug-viewers-empty">No one else is viewing this bug right now.</div>
      </div>
    );
  }

  return (
    <div className="bug-viewers">
      <div className="bug-viewers-label">Currently viewing</div>
      <div className="bug-viewers-list">
        {visibleViewers.map((viewer) => (
          <div className="bug-viewer-chip" key={viewer.id}>
            {viewer.avatar ? (
              <img className="bug-viewer-avatar" src={viewer.avatar} alt={viewer.name} />
            ) : (
              <div className="bug-viewer-avatar bug-viewer-avatar-fallback">{viewer.name ? viewer.name.charAt(0).toUpperCase() : '?'}</div>
            )}
            <span className="bug-viewer-name">{viewer.name || 'Unknown'}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

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