/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * ProjectList — Browse/manage all projects [components/ProjectList.jsx]
 * ProjectForm — Create/edit project with materials and steps [components/ProjectForm.jsx]
 * ProjectDetail — View full project details [components/ProjectDetail.jsx]
 * @end-component-map */

import { useMemo, useState } from 'react';
import { useAuth, useCollection } from '@deplixo/sdk';
import { ProjectList } from './components/ProjectList.jsx';
import { ProjectForm } from './components/ProjectForm.jsx';
import { ProjectDetail } from './components/ProjectDetail.jsx';

function App() {
  const { user, loading, login, logout } = useAuth();
  const [view, setView] = useState('list');
  const [editingProject, setEditingProject] = useState(null);
  const [viewingProject, setViewingProject] = useState(null);
  const [tutorialProject, setTutorialProject] = useState(null);
  const [tutorialLinkCopied, setTutorialLinkCopied] = useState(false);

  const { update: updateProject } = useCollection('projects', { personal: true });

  const tutorialUrl = useMemo(() => {
    if (!tutorialProject) return '';
    const baseUrl = typeof window !== 'undefined' ? window.location.origin + window.location.pathname : '';
    return `${baseUrl}?tutorial=${encodeURIComponent(tutorialProject.id || tutorialProject._id || tutorialProject.slug || tutorialProject.title || '')}`;
  }, [tutorialProject]);

  const handleCreate = () => {
    setEditingProject(null);
    setView('form');
  };

  const handleEdit = (project) => {
    setEditingProject(project);
    setView('form');
  };

  const handleView = (project) => {
    setViewingProject(project);
    setView('detail');
  };

  const handleBack = () => {
    setView('list');
    setEditingProject(null);
    setViewingProject(null);
    setTutorialProject(null);
    setTutorialLinkCopied(false);
  };

  const handleSaved = () => {
    setView('list');
    setEditingProject(null);
  };

  const handleMarkFinished = async (project, finished) => {
    if (!project) return;
    const projectId = project.id || project._id;
    if (!projectId) return;

    await updateProject(projectId, {
      ...project,
      isFinished: finished,
      publishedAsTutorial: finished ? Boolean(project.publishedAsTutorial) : false,
      tutorialPublishedAt: finished ? project.tutorialPublishedAt || new Date().toISOString() : null,
    });

    const nextProject = { ...project, isFinished: finished };
    if (viewingProject && (viewingProject.id || viewingProject._id) === projectId) {
      setViewingProject(nextProject);
    }
    if (tutorialProject && (tutorialProject.id || tutorialProject._id) === projectId) {
      setTutorialProject({ ...tutorialProject, isFinished: finished });
    }
  };

  const handleOpenTutorial = (project) => {
    setTutorialProject(project);
    setTutorialLinkCopied(false);
  };

  const handleCopyTutorialLink = async () => {
    if (!tutorialUrl) return;
    try {
      await navigator.clipboard.writeText(tutorialUrl);
      setTutorialLinkCopied(true);
      window.setTimeout(() => setTutorialLinkCopied(false), 1800);
    } catch {
      setTutorialLinkCopied(false);
    }
  };

  const handleShareTutorial = async () => {
    if (!tutorialProject) return;

    const text = `Tutorial: ${tutorialProject.title || 'DIY Project'}\n${tutorialUrl}`;
    if (navigator.share) {
      try {
        await navigator.share({
          title: `${tutorialProject.title || 'DIY Project'} Tutorial`,
          text,
          url: tutorialUrl,
        });
        return;
      } catch {
        // fall back to copy link
      }
    }
    await handleCopyTutorialLink();
  };

  if (loading) {
    return (
      <div className="app-shell auth-shell">
        <main className="auth-screen">
          <div className="auth-card">
            <div className="auth-brand">
              <span className="logo-icon">🔨</span>
              <h1 className="app-title">DIY Planner</h1>
            </div>
            <p className="auth-message">Signing you in...</p>
          </div>
        </main>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="app-shell auth-shell">
        <main className="auth-screen">
          <div className="auth-card">
            <div className="auth-brand">
              <span className="logo-icon">🔨</span>
              <h1 className="app-title">DIY Planner</h1>
            </div>
            <p className="auth-message">
              Sign in with Google to access and manage your personal projects.
            </p>
            <button className="btn-primary btn-auth" onClick={login}>
              Continue with Google
            </button>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <div className="logo-area">
            <span className="logo-icon">🔨</span>
            <h1 className="app-title">DIY Planner</h1>
          </div>
          <div className="header-actions">
            <span className="user-chip">{user.name}</span>
            <button className="btn-secondary btn-logout" onClick={logout}>Sign Out</button>
            {view !== 'list' && (
              <button className="btn-back" onClick={handleBack}>← Projects</button>
            )}
            {view === 'list' && (
              <button className="btn-primary" onClick={handleCreate}>+ New Project</button>
            )}
          </div>
        </div>
      </header>
      <main className="app-main">
        {view === 'list' && (
          <ProjectList onView={handleView} onEdit={handleEdit} onCreate={handleCreate} onOpenTutorial={handleOpenTutorial} />
        )}
        {view === 'form' && (
          <ProjectForm project={editingProject} onSaved={handleSaved} onCancel={handleBack} />
        )}
        {view === 'detail' && viewingProject && (
          <ProjectDetail project={viewingProject} onEdit={handleEdit} onBack={handleBack} onOpenTutorial={handleOpenTutorial} />
        )}
      </main>

      {tutorialProject && (
        <div className="tutorial-modal-backdrop" onClick={() => setTutorialProject(null)}>
          <div className="tutorial-modal" onClick={(e) => e.stopPropagation()}>
            <div className="tutorial-modal-header">
              <div>
                <p className="tutorial-kicker">Tutorial publishing</p>
                <h2 className="tutorial-title">{tutorialProject.title || 'Untitled Project'}</h2>
              </div>
              <button className="btn-icon" onClick={() => setTutorialProject(null)} aria-label="Close tutorial sharing">
                ✕
              </button>
            </div>

            <div className="tutorial-status">
              <div>
                <strong>Status:</strong> {tutorialProject.isFinished ? 'Finished' : 'In progress'}
              </div>
              <label className="tutorial-switch">
                <input
                  type="checkbox"
                  checked={Boolean(tutorialProject.isFinished)}
                  onChange={(e) => {
                    const nextFinished = e.target.checked;
                    setTutorialProject((current) => (current ? { ...current, isFinished: nextFinished } : current));
                    handleMarkFinished(tutorialProject, nextFinished);
                  }}
                />
                <span>Mark as finished for publishing</span>
              </label>
            </div>

            <div className="tutorial-preview">
              <div className="tutorial-preview-label">Public tutorial link</div>
              <code className="tutorial-link">{tutorialUrl || 'Link will appear once the project has an id.'}</code>
              <p className="tutorial-help">
                Share this link to show the tutorial-style project view with progress, materials, and steps.
              </p>
            </div>

            <div className="tutorial-actions">
              <button className="btn-secondary" onClick={handleCopyTutorialLink} disabled={!tutorialUrl}>
                {tutorialLinkCopied ? 'Copied!' : 'Copy Link'}
              </button>
              <button className="btn-primary" onClick={handleShareTutorial} disabled={!tutorialUrl}>
                Share Tutorial
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

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