/* @component-map
 * App — Main container, handles view switching between tabs and role toggling
 * TaskBoard — Task management with add/edit/complete/filter functionality
 * HouseInfo — House information display and editing
 * PetCare — Pet profiles with care instructions and photos
 * PhotoGallery — Photo uploads with captions for house documentation
 * Toast — Notification toast component
 * @end-component-map */

import { useIdentity } from '@deplixo/sdk';
import { TaskBoard } from './components/TaskBoard.jsx';
import { HouseInfo } from './components/HouseInfo.jsx';
import { PetCare } from './components/PetCare.jsx';
import { PhotoGallery } from './components/PhotoGallery.jsx';
import { createContext, useCallback, useContext, useState } from 'react';
import { Toast } from './components/Toast.jsx';

export const AppContext = createContext();

export function useAppContext() {
  return useContext(AppContext);
}

function App() {
  const [activeTab, setActiveTab] = useState('tasks');
  const [role, setRole] = useState('owner');
  const [toast, setToast] = useState(null);
  const identity = useIdentity();

  const showToast = useCallback((message) => {
    setToast(message);
    setTimeout(() => setToast(null), 3000);
  }, []);

  const toggleRole = () => {
    setRole(r => r === 'owner' ? 'sitter' : 'owner');
  };

  const tabs = [
    { id: 'tasks', label: '✅ Tasks' },
    { id: 'house', label: '🏡 House Info' },
    { id: 'pets', label: '🐾 Pets' },
    { id: 'photos', label: '📷 Photos' }
  ];

  return (
    <AppContext.Provider value={{ role, showToast }}>
      <div className="app-container">
        <header className="app-header">
          <div className="header-inner">
            <div className="header-brand">
              <span className="brand-emoji">🏠</span>
              <div>
                <h1 className="brand-title">HouseSitter Hub</h1>
                <p className="brand-sub">{role === 'owner' ? 'Managing your home' : 'Caring for the home'}</p>
              </div>
            </div>
            <div className="header-actions">
              <div className={`role-current-badge ${role === 'owner' ? 'owner-badge' : 'sitter-badge'}`}>
                {role === 'owner' ? '🏠 Owner View' : '👤 Sitter View'}
              </div>
              <button className="role-toggle-btn" onClick={toggleRole} title="Switch View">
                <span>{role === 'owner' ? '👤' : '🏠'}</span>
                <span>{role === 'owner' ? 'Sitter View' : 'Owner View'}</span>
              </button>
            </div>
          </div>
          <div className={`role-indicator-bar ${role === 'owner' ? 'owner-bar' : 'sitter-bar'}`}></div>
          <nav className="tab-bar">
            {tabs.map(t => (
              <button key={t.id} className={`tab-btn ${activeTab === t.id ? 'active' : ''}`} onClick={() => setActiveTab(t.id)}>
                {t.label}
              </button>
            ))}
          </nav>
        </header>
        <main className="main-content">
          {activeTab === 'tasks' && <TaskBoard />}
          {activeTab === 'house' && <HouseInfo />}
          {activeTab === 'pets' && <PetCare />}
          {activeTab === 'photos' && <PhotoGallery />}
        </main>
        <Toast message={toast} />
      </div>
    </AppContext.Provider>
  );
}

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