import { useEffect, useMemo, useState } from 'react';
import { Dashboard } from './components/Dashboard.jsx';
import { RoommateManager } from './components/RoommateManager.jsx';
import { ChoreManager } from './components/ChoreManager.jsx';
import { RotationHistory } from './components/RotationHistory.jsx';

function App() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [shareStatus, setShareStatus] = useState('');

  const tabs = [
    { id: 'dashboard', label: '📋 This Week', icon: '📋' },
    { id: 'roommates', label: '👥 Roommates', icon: '👥' },
    { id: 'chores', label: '🧹 Chores', icon: '🧹' },
    { id: 'history', label: '📊 History', icon: '📊' },
  ];

  const householdShareLink = useMemo(() => {
    if (typeof window === 'undefined') return '';
    return window.location.href;
  }, []);

  useEffect(() => {
    if (!shareStatus) return undefined;
    const timer = setTimeout(() => setShareStatus(''), 2500);
    return () => clearTimeout(timer);
  }, [shareStatus]);

  const handleShareHousehold = async () => {
    const url = householdShareLink || window.location.href;
    const shareData = {
      title: 'Join my ChoreWheel household',
      text: 'Use this link to access our household chore rotation.',
      url,
    };

    try {
      if (navigator.share) {
        await navigator.share(shareData);
        setShareStatus('Shared successfully');
        return;
      }

      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(url);
        setShareStatus('Household link copied');
        return;
      }

      const fallbackInput = document.createElement('input');
      fallbackInput.value = url;
      document.body.appendChild(fallbackInput);
      fallbackInput.select();
      document.execCommand('copy');
      document.body.removeChild(fallbackInput);
      setShareStatus('Household link copied');
    } catch (error) {
      setShareStatus('Could not share link');
    }
  };

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-content">
          <h1 className="app-title">ChoreWheel</h1>
          <p className="app-subtitle">Fair chores, happy roommates</p>
        </div>
      </header>

      <nav className="tab-nav">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            <span className="tab-icon">{tab.icon}</span>
            <span className="tab-label">{tab.label.split(' ').slice(1).join(' ')}</span>
          </button>
        ))}
      </nav>

      <main className="main-content">
        <div className="card share-card">
          <div className="share-copy">
            <h2 className="share-title">Share your household</h2>
            <p className="share-desc">Invite roommates by sharing the household link.</p>
          </div>
          <div className="share-actions">
            <button className="btn-secondary btn-share" onClick={handleShareHousehold}>
              🔗 Share link
            </button>
            {shareStatus ? <span className="share-status">{shareStatus}</span> : null}
          </div>
        </div>

        {activeTab === 'dashboard' && <Dashboard />}
        {activeTab === 'roommates' && <RoommateManager />}
        {activeTab === 'chores' && <ChoreManager />}
        {activeTab === 'history' && <RotationHistory />}
      </main>
    </div>
  );
}

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