import { useEffect, useMemo, useState } from 'react';
import { useAuth, useCollection, usePresence, useAI } from '@deplixo/sdk';
import { Timer } from './components/Timer.jsx';
import { SessionLog } from './components/SessionLog.jsx';
import { Stats } from './components/Stats.jsx';

function App() {
  const { user, loading, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('meditate');
  const { items: sessionItems, loading: sessionsLoading } = useCollection('sessions', { personal: true });
  const { items: statsItems, loading: statsLoading } = useCollection('stats', { personal: true });
  const { users: presenceUsers, update: updatePresence } = usePresence(
    user
      ? {
          name: user.name,
          avatar: user.avatar,
          status: 'idle'
        }
      : { name: 'Guest', status: 'idle' }
  );
  const { generate, loading: aiLoading, error: aiError } = useAI();
  const [scheduleAnalysis, setScheduleAnalysis] = useState({ status: 'idle', suggestion: '', error: '' });
  const [analysisRequested, setAnalysisRequested] = useState(false);
  const [shareStatus, setShareStatus] = useState('idle');

  const tabs = [
    { id: 'meditate', label: '🧘 Meditate', icon: '🧘' },
    { id: 'stats', label: '📊 Stats', icon: '📊' },
    { id: 'history', label: '📜 History', icon: '📜' }
  ];

  const sessionCount = Array.isArray(sessionItems) ? sessionItems.length : 0;
  const sessionsReady = !sessionsLoading && sessionCount >= 10;

  const sortedSessions = useMemo(() => {
    return [...(Array.isArray(sessionItems) ? sessionItems : [])].sort((a, b) => {
      const aTime = new Date(a.createdAt || a.date || a.timestamp || 0).getTime();
      const bTime = new Date(b.createdAt || b.date || b.timestamp || 0).getTime();
      return aTime - bTime;
    });
  }, [sessionItems]);

  const weeklyMinutesData = useMemo(() => buildWeeklyMinutesData(sessionItems), [sessionItems]);
  const streakTrendData = useMemo(() => buildStreakTrendData(sessionItems), [sessionItems]);
  const currentStreak = streakTrendData.data.length ? streakTrendData.data[streakTrendData.data.length - 1] : 0;
  const totalMeditations = sessionCount;

  const shareText = useMemo(() => {
    return `I’m on a ${currentStreak}-day meditation streak with ${totalMeditations} total meditations in Ember Glow. ✨`;
  }, [currentStreak, totalMeditations]);

  const shareLink = useMemo(() => {
    if (typeof window === 'undefined') return '';
    const url = new URL(window.location.href);
    url.searchParams.set('streak', String(currentStreak));
    url.searchParams.set('meditations', String(totalMeditations));
    url.searchParams.set('shared', '1');
    return url.toString();
  }, [currentStreak, totalMeditations]);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const params = new URLSearchParams(window.location.search);
    const streak = params.get('streak');
    const meditations = params.get('meditations');
    if (params.get('shared') === '1' && streak && meditations) {
      setShareStatus('shared');
    }
  }, []);

  useEffect(() => {
    const runAnalysis = async () => {
      if (!sessionsReady || analysisRequested) return;
      setAnalysisRequested(true);
      setScheduleAnalysis({ status: 'loading', suggestion: '', error: '' });

      try {
        const prompts = sortedSessions.slice(-20).map((session, index) => {
          const createdAt = new Date(session.createdAt || session.date || session.timestamp || Date.now()).toISOString();
          const duration = Number(session.duration || session.minutes || session.length || 0);
          const sound = session.sound || session.soundName || 'silence';
          return `${index + 1}. Date: ${createdAt}, Duration: ${duration} min, Sound: ${sound}`;
        }).join('\n');

        const prompt = `You are a meditation coach analyzing a user's session history. The user has completed at least 10 meditation sessions. Review these sessions and produce a practical optimal meditation schedule suggestion.

Focus on: preferred time of day patterns, session duration trends, consistency, recovery after missed days, and an ideal weekly plan.

Return concise, friendly guidance in 3 short paragraphs and include a bullet list schedule recommendation with specific days/times/durations.

Session history:\n${prompts}`;

        const result = await generate(prompt);
        const suggestion = typeof result === 'string' ? result : (result?.text || result?.output || JSON.stringify(result));
        setScheduleAnalysis({ status: 'success', suggestion, error: '' });
      } catch (err) {
        setScheduleAnalysis({
          status: 'error',
          suggestion: '',
          error: err?.message || 'Unable to generate your schedule suggestion right now.'
        });
      }
    };

    runAnalysis();
  }, [sessionsReady, analysisRequested, sortedSessions, generate]);

  const activeMeditators = (presenceUsers || []).filter((person) => person && person.status === 'meditating');

  const handleShareStreak = async () => {
    const text = shareText;
    const url = shareLink;

    try {
      if (navigator.share) {
        await navigator.share({
          title: 'My Ember Glow streak',
          text,
          url
        });
        setShareStatus('shared');
        return;
      }

      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(`${text} ${url}`.trim());
        setShareStatus('copied');
        return;
      }

      setShareStatus('fallback');
    } catch (err) {
      setShareStatus('error');
    }
  };

  if (loading) {
    return (
      <div className="app-container auth-gate">
        <main className="auth-screen">
          <div className="header-glow"></div>
          <h1 className="app-title">Ember Glow</h1>
          <p className="app-subtitle">Mindful Meditation</p>
          <p className="auth-status">Signing in with Google...</p>
        </main>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="app-container auth-gate">
        <main className="auth-screen">
          <div className="header-glow"></div>
          <h1 className="app-title">Ember Glow</h1>
          <p className="app-subtitle">Mindful Meditation</p>
          <p className="auth-status">Please sign in with Google to access your personal session history and stats.</p>
        </main>
      </div>
    );
  }

  const dataLoading = sessionsLoading || statsLoading;
  const showAnalysisSection = sessionCount >= 10;

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-glow"></div>
        <div className="auth-bar">
          <div className="user-chip">
            {user.avatar ? <img className="user-avatar" src={user.avatar} alt={user.name} /> : <span className="user-avatar-fallback">{user.name?.[0] || 'U'}</span>}
            <div className="user-meta">
              <span className="user-name">{user.name}</span>
              <span className="user-email">Google sign-in</span>
            </div>
          </div>
          <button className="btn-logout" onClick={logout}>Logout</button>
        </div>
        <h1 className="app-title">Ember Glow</h1>
        <p className="app-subtitle">Mindful Meditation</p>
      </header>

      <main className="app-main">
        <section className="presence-panel">
          <div className="presence-panel-header">
            <h2 className="presence-title">Meditating now</h2>
            <span className="presence-count">{activeMeditators.length} active</span>
          </div>
          {activeMeditators.length > 0 ? (
            <ul className="presence-list">
              {activeMeditators.map((person) => (
                <li key={person.id} className="presence-item">
                  {person.avatar ? <img className="presence-avatar" src={person.avatar} alt={person.name} /> : <span className="presence-avatar-fallback">{person.name?.[0] || 'U'}</span>}
                  <div className="presence-meta">
                    <span className="presence-name">{person.name || 'Anonymous'}</span>
                    <span className="presence-status">In session</span>
                  </div>
                </li>
              ))}
            </ul>
          ) : (
            <p className="presence-empty">No one is meditating right now. Start a session to appear here.</p>
          )}
        </section>

        <section className="analytics-chart-card streak-share-card">
          <div className="analytics-chart-header">
            <h2 className="analytics-chart-title">Share your streak</h2>
            <p className="analytics-chart-subtitle">Show your current streak and total meditation count</p>
          </div>
          <div className="streak-share-summary">
            <div className="stat-card streak-share-stat">
              <div className="stat-value">{currentStreak}</div>
              <div className="stat-label">Day streak</div>
            </div>
            <div className="stat-card streak-share-stat">
              <div className="stat-value">{totalMeditations}</div>
              <div className="stat-label">Total meditations</div>
            </div>
          </div>
          <div className="streak-share-actions">
            <button className="btn-primary streak-share-button" onClick={handleShareStreak}>Share streak</button>
            <a className="streak-share-link" href={shareLink} onClick={(e) => { e.preventDefault(); handleShareStreak(); }}>
              Copy/share link
            </a>
          </div>
          {shareStatus === 'copied' && <p className="streak-share-feedback">Your streak link was copied to the clipboard.</p>}
          {shareStatus === 'shared' && <p className="streak-share-feedback">Share sheet opened with your streak details.</p>}
          {shareStatus === 'error' && <p className="streak-share-feedback">We couldn't share automatically, but your streak is ready to copy.</p>}
          {shareStatus === 'shared' && (
            <p className="streak-share-feedback">This page was opened from a shared streak link.</p>
          )}
        </section>

        {showAnalysisSection && (
          <section className="analytics-chart-card schedule-analysis-card">
            <div className="analytics-chart-header">
              <h2 className="analytics-chart-title">Optimal schedule suggestion</h2>
              <p className="analytics-chart-subtitle">AI review of your meditation patterns after 10 sessions</p>
            </div>

            {scheduleAnalysis.status === 'loading' || aiLoading ? (
              <div className="empty-chart-state">Analyzing your sessions and building a personalized plan...</div>
            ) : scheduleAnalysis.status === 'error' || aiError ? (
              <div className="schedule-analysis-error">
                <p>{scheduleAnalysis.error || aiError?.message || 'We could not generate your schedule suggestion right now.'}</p>
              </div>
            ) : scheduleAnalysis.status === 'success' ? (
              <div className="schedule-analysis-content">
                <p className="schedule-analysis-text">{scheduleAnalysis.suggestion}</p>
              </div>
            ) : (
              <div className="empty-chart-state">Your personalized schedule suggestion will appear here once enough sessions are available.</div>
            )}
          </section>
        )}

        {dataLoading ? (
          <div className="auth-loading">Loading your personal meditation data...</div>
        ) : (
          <>
            {activeTab === 'meditate' && <Timer onPresenceChange={updatePresence} />}
            {activeTab === 'stats' && <Stats sessionItems={sessionItems || []} statsItems={statsItems || []} />}
            {activeTab === 'history' && <SessionLog />}
          </>
        )}
      </main>

      <nav className="tab-bar">
        {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(' ')[1]}</span>
          </button>
        ))}
      </nav>
    </div>
  );
}

function buildWeeklyMinutesData(sessionItems) {
  const sessions = Array.isArray(sessionItems) ? sessionItems : [];
  const now = new Date();
  const mondayOffset = (now.getDay() + 6) % 7;
  const startOfThisWeek = new Date(now);
  startOfThisWeek.setDate(now.getDate() - mondayOffset);
  startOfThisWeek.setHours(0, 0, 0, 0);

  const weekStarts = Array.from({ length: 6 }, (_, i) => {
    const d = new Date(startOfThisWeek);
    d.setDate(d.getDate() - (5 - i) * 7);
    return d;
  });

  const labels = weekStarts.map((d) => {
    const end = new Date(d);
    end.setDate(end.getDate() + 6);
    return `${d.getMonth() + 1}/${d.getDate()}-${end.getMonth() + 1}/${end.getDate()}`;
  });

  const data = weekStarts.map((weekStart) => {
    const weekEnd = new Date(weekStart);
    weekEnd.setDate(weekEnd.getDate() + 7);
    return sessions.reduce((sum, session) => {
      const createdAt = new Date(session.createdAt || session.date || session.timestamp || 0);
      const duration = Number(session.duration || session.minutes || session.length || 0);
      if (createdAt >= weekStart && createdAt < weekEnd) return sum + duration;
      return sum;
    }, 0);
  });

  return { labels, data };
}

function buildStreakTrendData(sessionItems) {
  const sessions = Array.isArray(sessionItems) ? sessionItems : [];
  const sortedDays = [...new Set(
    sessions
      .map((session) => new Date(session.createdAt || session.date || session.timestamp || 0))
      .filter((d) => !Number.isNaN(d.getTime()))
      .map((d) => d.toISOString().slice(0, 10))
  )].sort();

  const labels = [];
  const data = [];
  let streak = 0;
  let previousDay = null;

  sortedDays.forEach((day) => {
    const current = new Date(day + 'T00:00:00');
    if (!previousDay) {
      streak = 1;
    } else {
      const diffDays = Math.round((current - previousDay) / (1000 * 60 * 60 * 24));
      streak = diffDays === 1 ? streak + 1 : 1;
    }
    labels.push(day.slice(5));
    data.push(streak);
    previousDay = current;
  });

  return { labels, data };
}

function StatsWithCharts({ sessionItems = [], statsItems = [] }) {
  return <Stats sessionItems={sessionItems} statsItems={statsItems} />;
}

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