/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · component: App · genre: editorial · theme: Atelier (Dark & Light) */
import React, { useState, useEffect } from 'react';
import Navbar from './components/Navbar';
import ShiftMatrixTable from './components/ShiftMatrixTable';
import GuestSignupModal from './components/GuestSignupModal';
import SkillsModal from './components/SkillsModal';
import AuthModal from './components/AuthModal';
import HomePage from './pages/HomePage';
import CalendarPage from './pages/CalendarPage';
import AdminPage from './pages/AdminPage';
import EventEditorPage from './pages/EventEditorPage';
import TemplatesPage from './pages/TemplatesPage';
import { apiFetch, getAuthToken, setAuthToken } from './api/client';
import { Plus, CheckCircle2 } from 'lucide-react';

export default function App() {
  const [user, setUser] = useState(null);
  const [branding, setBranding] = useState(null);
  const [skills, setSkills] = useState([]);
  const [events, setEvents] = useState([]);
  const [selectedEventId, setSelectedEventId] = useState(null);
  const [selectedEventData, setSelectedEventData] = useState(null);
  const [loading, setLoading] = useState(true);

  // Active Navigation Tab: 'home' | 'calendar' | 'schedule' | 'admin' | 'event-editor' | 'templates'
  const [activeTab, setActiveTab] = useState('home');

  // Modals state (Authentication & Guest Signup)
  const [showAuthModal, setShowAuthModal] = useState(false);
  const [showGuestModal, setShowGuestModal] = useState(false);
  const [guestTargetShift, setGuestTargetShift] = useState(null);
  const [showSkillsModal, setShowSkillsModal] = useState(false);
  const [showProfileModal, setShowProfileModal] = useState(false);

  // Theme Mode: 'dark' | 'light' | 'auto'
  const [themeMode, setThemeMode] = useState(
    localStorage.getItem('theme_mode') || 'auto'
  );

  // Toast / notification state
  const [toastMessage, setToastMessage] = useState(null);

  // PWA install prompt
  const [deferredPrompt, setDeferredPrompt] = useState(null);

  useEffect(() => {
    window.addEventListener('beforeinstallprompt', (e) => {
      e.preventDefault();
      setDeferredPrompt(e);
    });

    initApp();
  }, []);

  useEffect(() => {
    localStorage.setItem('theme_mode', themeMode);

    const applyTheme = () => {
      let activeTheme = themeMode;
      if (themeMode === 'auto') {
        activeTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
      }
      document.documentElement.setAttribute('data-theme', activeTheme);
    };

    applyTheme();

    if (themeMode === 'auto') {
      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
      const handleChange = () => applyTheme();
      mediaQuery.addEventListener('change', handleChange);
      return () => mediaQuery.removeEventListener('change', handleChange);
    }
  }, [themeMode]);

  useEffect(() => {
    if (branding?.primary_color) {
      document.documentElement.style.setProperty('--brand-primary', branding.primary_color);
      document.documentElement.style.setProperty(
        '--brand-secondary',
        branding.secondary_color || branding.primary_color
      );
    }
  }, [branding]);

  const [claimToken, setClaimToken] = useState(null);
  const [prefilledGuestName, setPrefilledGuestName] = useState(null);

  const showNotification = (msg) => {
    setToastMessage(msg);
    setTimeout(() => setToastMessage(null), 5000);
  };

  const initApp = async () => {
    setLoading(true);
    try {
      // 1. Fetch Branding
      try {
        const brandData = await apiFetch('/branding/');
        setBranding(brandData);
      } catch (e) {}

      // 2. Fetch User profile if token exists
      if (getAuthToken()) {
        try {
          const userData = await apiFetch('/users/me/');
          setUser(userData);
          if (!userData.is_admin_user && !userData.is_staff && !userData.is_superuser && activeTab === 'admin') {
            setActiveTab('home');
          }
        } catch (e) {
          setAuthToken(null);
          setUser(null);
          setActiveTab('home');
        }
      }

      // 3. Check URL parameters for email verification and claim link
      const urlParams = new URLSearchParams(window.location.search);
      const verifyToken = urlParams.get('verify_email');
      if (verifyToken) {
        try {
          const data = await apiFetch('/users/verify-email/', {
            method: 'POST',
            body: JSON.stringify({ token: verifyToken })
          });
          setAuthToken(data.token);
          setUser(data.user);
          showNotification(data.message || '✅ E-Mail-Adresse erfolgreich bestätigt!');
          window.history.replaceState({}, document.title, window.location.pathname);
        } catch (err) {
          showNotification(`⚠️ E-Mail Bestätigung: ${err.message}`);
        }
      }

      const cToken = urlParams.get('claim_token');
      const gName = urlParams.get('guest_name');
      if (cToken && gName) {
        setClaimToken(cToken);
        setPrefilledGuestName(gName);
        if (!getAuthToken()) {
          setShowAuthModal(true);
        }
      }

      // 4. Fetch Skills & Events
      await refreshSkills();
      await refreshEvents();
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  const handleGenerateClaimLink = async (signup) => {
    try {
      const data = await apiFetch(`/users/signups/${signup.id}/generate-claim-link/`, {
        method: 'POST'
      });

      const claimUrl = `${window.location.origin}/?claim_token=${data.token}&guest_name=${encodeURIComponent(data.guest_name)}`;

      if (navigator.clipboard) {
        await navigator.clipboard.writeText(claimUrl);
        showNotification(`✅ Einladungs-Link für ${data.guest_name} in Zwischenablage kopiert!`);
      } else {
        prompt(`Einladungs-Link für ${data.guest_name} kopieren:`, claimUrl);
      }
    } catch (err) {
      alert(err.message || 'Fehler beim Erstellen des Links.');
    }
  };

  const refreshSkills = async () => {
    try {
      const data = await apiFetch('/skills/');
      setSkills(data.results || data);
    } catch (e) {}
  };

  const updateUrlParam = (id) => {
    if (!id) return;
    try {
      const url = new URL(window.location.href);
      url.searchParams.set('event', id);
      window.history.replaceState(null, '', url.pathname + url.search);
    } catch (e) {}
  };

  const refreshEvents = async () => {
    try {
      const data = await apiFetch('/events/');
      const list = data.results || data;
      setEvents(list);

      // Check URL query parameters for deep linking (?event=12)
      const urlParams = new URLSearchParams(window.location.search);
      const urlEventParam = urlParams.get('event') || urlParams.get('event_id');
      const targetIdFromUrl = urlEventParam ? parseInt(urlEventParam, 10) : null;

      if (targetIdFromUrl && list.some(e => e.id === targetIdFromUrl)) {
        setSelectedEventId(targetIdFromUrl);
        fetchEventMatrix(targetIdFromUrl);
        setActiveTab('schedule');
        updateUrlParam(targetIdFromUrl);
      } else if (list.length > 0 && !selectedEventId) {
        setSelectedEventId(list[0].id);
        fetchEventMatrix(list[0].id);
        updateUrlParam(list[0].id);
      } else if (selectedEventId) {
        fetchEventMatrix(selectedEventId);
        updateUrlParam(selectedEventId);
      }
    } catch (e) {}
  };

  const fetchEventMatrix = async (eventId) => {
    try {
      const matrixData = await apiFetch(`/events/${eventId}/matrix/`);
      setSelectedEventData(matrixData);
    } catch (e) {}
  };

  const handleSelectEvent = (id) => {
    setSelectedEventId(id);
    fetchEventMatrix(id);
    setActiveTab('schedule');
    updateUrlParam(id);
  };

  const fallbackCopyText = (text) => {
    const el = document.createElement('textarea');
    el.value = text;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    showNotification('Direktlink zum Schichtplan in Zwischenablage kopiert! 🔗');
  };

  const handleShareEvent = (targetEventOrId) => {
    const targetId = typeof targetEventOrId === 'object' ? targetEventOrId.id : (targetEventOrId || selectedEventId);
    if (!targetId) return;

    const shareUrl = `${window.location.origin}${window.location.pathname}?event=${targetId}`;

    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(shareUrl).then(() => {
        showNotification('Direktlink zum Schichtplan in Zwischenablage kopiert! 🔗');
      }).catch(() => {
        fallbackCopyText(shareUrl);
      });
    } else {
      fallbackCopyText(shareUrl);
    }
  };

  const handleLogout = () => {
    setAuthToken(null);
    setUser(null);
    setActiveTab('home');
    showNotification('Erfolgreich abgemeldet.');
    if (selectedEventId) fetchEventMatrix(selectedEventId);
  };

  const handleAuthSuccess = (userData, message) => {
    setUser(userData);
    if (userData && !userData.is_admin_user && !userData.is_staff && !userData.is_superuser && activeTab === 'admin') {
      setActiveTab('home');
    }
    showNotification(message || 'Erfolgreich angemeldet!');
    if (selectedEventId) fetchEventMatrix(selectedEventId);
  };

  // Shift Signup Handler
  const handleShiftSignupClick = async (shift) => {
    if (!user) {
      setGuestTargetShift(shift);
      setShowGuestModal(true);
    } else {
      try {
        const res = await apiFetch(`/shifts/${shift.id}/signup/`, {
          method: 'POST'
        });
        showNotification(res.message || 'Erfolgreich für Schicht eingetragen!');
        if (selectedEventId) fetchEventMatrix(selectedEventId);
      } catch (err) {
        showNotification(`Fehler: ${err.message}`);
      }
    }
  };

  const handleGuestSubmit = async (guestData) => {
    if (!guestTargetShift) return;
    const res = await apiFetch(`/shifts/${guestTargetShift.id}/signup/`, {
      method: 'POST',
      body: JSON.stringify(guestData)
    });
    showNotification(res.message || 'Als Gast eingetragen!');
    if (selectedEventId) fetchEventMatrix(selectedEventId);
  };

  const handleCancelSignup = async (shift) => {
    try {
      const res = await apiFetch(`/shifts/${shift.id}/signup/`, {
        method: 'DELETE'
      });
      showNotification(res.message || 'Eintragung storniert.');
      if (selectedEventId) fetchEventMatrix(selectedEventId);
    } catch (err) {
      showNotification(`Fehler: ${err.message}`);
    }
  };

  const handleDeleteEvent = async (eventObj) => {
    if (!eventObj || !eventObj.id) return;
    if (!window.confirm(`Möchtest du die Veranstaltung "${eventObj.title}" und alle zugehörigen Schichten wirklich unwiderruflich löschen?`)) {
      return;
    }

    try {
      await apiFetch(`/events/${eventObj.id}/`, {
        method: 'DELETE'
      });
      showNotification(`Veranstaltung "${eventObj.title}" wurde erfolgreich gelöscht.`);
      if (selectedEventId === eventObj.id) {
        setSelectedEventId(null);
      }
      if (activeTab === 'event-editor') {
        setActiveTab('home');
      }
      refreshEvents();
    } catch (err) {
      showNotification(`Fehler beim Löschen: ${err.message}`);
    }
  };

  const [eventToEdit, setEventToEdit] = useState(null);

  const handleSaveEventSubmit = async (eventPayload) => {
    let targetEventId = eventPayload.id;

    if (targetEventId) {
      // Edit existing event
      await apiFetch(`/events/${targetEventId}/`, {
        method: 'PATCH',
        body: JSON.stringify({
          title: eventPayload.title,
          description: eventPayload.description,
          location: eventPayload.location,
          start_date: eventPayload.start_date,
          end_date: eventPayload.end_date,
          co_manager_ids: eventPayload.co_manager_ids || []
        })
      });
    } else {
      // Create new event
      const created = await apiFetch('/events/', {
        method: 'POST',
        body: JSON.stringify({
          title: eventPayload.title,
          description: eventPayload.description,
          location: eventPayload.location,
          start_date: eventPayload.start_date,
          end_date: eventPayload.end_date,
          co_manager_ids: eventPayload.co_manager_ids || []
        })
      });
      targetEventId = created.id;
    }

    for (let taData of eventPayload.task_areas) {
      if (!taData.name) continue;

      let taId = taData.id;
      if (taId) {
        await apiFetch(`/task-areas/${taId}/`, {
          method: 'PATCH',
          body: JSON.stringify({
            name: taData.name,
            description: taData.description || ''
          })
        });
      } else {
        const createdTa = await apiFetch('/task-areas/', {
          method: 'POST',
          body: JSON.stringify({
            event: targetEventId,
            name: taData.name,
            description: taData.description || ''
          })
        });
        taId = createdTa.id;
      }

      for (let sData of taData.shifts) {
        const shiftDate = sData.date || eventPayload.start_date;
        if (sData.id) {
          await apiFetch(`/shifts/${sData.id}/`, {
            method: 'PATCH',
            body: JSON.stringify({
              title: sData.title,
              date: shiftDate,
              start_time: sData.start_time,
              end_time: sData.end_time,
              max_participants: sData.max_participants,
              required_skill_ids: sData.required_skill_ids || []
            })
          });
        } else {
          await apiFetch('/shifts/', {
            method: 'POST',
            body: JSON.stringify({
              task_area: taId,
              title: sData.title,
              date: shiftDate,
              start_time: sData.start_time,
              end_time: sData.end_time,
              max_participants: sData.max_participants,
              required_skill_ids: sData.required_skill_ids || []
            })
          });
        }
      }
    }

    showNotification(eventPayload.id ? 'Veranstaltung & Schichten aktualisiert!' : 'Veranstaltung erfolgreich erstellt!');
    await refreshEvents();
    setEventToEdit(null);
    handleSelectEvent(targetEventId);
  };

  const handleInstantiateTemplate = async (templateId, payload) => {
    const res = await apiFetch(`/templates/${templateId}/instantiate/`, {
      method: 'POST',
      body: JSON.stringify(payload)
    });
    showNotification('Veranstaltung aus Vorlage erstellt!');
    await refreshEvents();
    if (res.id) handleSelectEvent(res.id);
  };

  const handleExportPdf = () => {
    if (!selectedEventId) return;
    window.open(`/api/events/${selectedEventId}/export_pdf/`, '_blank');
  };

  const handlePrintView = () => {
    window.print();
  };

  const handleInstallPwa = () => {
    if (deferredPrompt) {
      deferredPrompt.prompt();
      deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          showNotification('PWA Installation gestartet!');
        }
        setDeferredPrompt(null);
      });
    }
  };

  return (
    <div className="min-h-screen bg-canvas text-main flex flex-col font-sans selection:bg-surface-hover transition-colors duration-200">
      {/* Toast Notification */}
      {toastMessage && (
        <div className="fixed bottom-6 right-6 z-50 bg-emerald-600 text-white px-4 py-2.5 rounded-sm shadow-2xl font-mono text-xs flex items-center gap-2 border border-emerald-400 animate-in fade-in slide-in-from-bottom-3 duration-200">
          <CheckCircle2 className="w-4 h-4" />
          <span>{toastMessage}</span>
        </div>
      )}

      {/* Navigation Masthead */}
      <Navbar
        branding={branding}
        user={user}
        activeTab={activeTab}
        onChangeTab={setActiveTab}
        themeMode={themeMode}
        onChangeThemeMode={setThemeMode}
        onLogout={handleLogout}
        onOpenAuth={() => setShowAuthModal(true)}
        onOpenCreateEvent={() => { setEventToEdit(null); setActiveTab('event-editor'); }}
        onOpenTemplates={() => setActiveTab('templates')}
        onOpenProfile={() => setShowProfileModal(true)}
        onOpenAdmin={() => setActiveTab('admin')}
        pwaInstallPrompt={Boolean(deferredPrompt)}
        onInstallPwa={handleInstallPwa}
      />

      {/* Main Content Area */}
      <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
        {loading ? (
          <div className="hallmark-panel p-16 text-center text-xs text-muted font-mono border border-grid">
            Lade Daten...
          </div>
        ) : activeTab === 'home' ? (
          <HomePage
            events={events}
            user={user}
            onSelectEvent={handleSelectEvent}
            onOpenCreateEvent={() => { setEventToEdit(null); setActiveTab('event-editor'); }}
            onToggleEventActive={async (evt) => {
              try {
                await apiFetch(`/events/${evt.id}/`, {
                  method: 'PATCH',
                  body: JSON.stringify({ is_active: evt.is_active === false ? true : false })
                });
                refreshEvents();
              } catch (err) {
                alert(err.message || 'Aktion fehlgeschlagen.');
              }
            }}
            onShareEvent={handleShareEvent}
            onEditEvent={(evt) => {
              setEventToEdit(evt);
              setActiveTab('event-editor');
            }}
            onDeleteEvent={handleDeleteEvent}
            branding={branding}
          />
        ) : activeTab === 'calendar' ? (
          <CalendarPage
            events={events}
            onSelectEvent={handleSelectEvent}
            branding={branding}
          />
        ) : activeTab === 'admin' && user && (user.is_admin_user || user.is_staff || user.is_superuser) ? (
          <AdminPage
            branding={branding}
            onRefreshBranding={async () => {
              const b = await apiFetch('/branding/');
              setBranding(b);
            }}
            onRefreshEvents={refreshEvents}
            skills={skills}
            onRefreshSkills={refreshSkills}
          />
        ) : activeTab === 'event-editor' ? (
          <EventEditorPage
            key={eventToEdit?.id || 'new-event'}
            eventToEdit={eventToEdit}
            skills={skills}
            user={user}
            onBack={() => setActiveTab('schedule')}
            onSubmit={handleSaveEventSubmit}
            onDeleteEvent={handleDeleteEvent}
          />
        ) : activeTab === 'templates' ? (
          <TemplatesPage
            onBack={() => setActiveTab('schedule')}
            onInstantiateTemplate={handleInstantiateTemplate}
            user={user}
            skills={skills}
          />
        ) : (
          <div className="space-y-6">
            {/* Event Selector Sub-Bar in Schedule View */}
            <div className="flex items-center justify-between gap-4 overflow-x-auto pb-2 no-scrollbar font-mono">
              <div className="flex items-center gap-2">
                <span className="text-xs font-bold text-muted uppercase tracking-wider whitespace-nowrap">
                  Ausgewähltes Event:
                </span>
                {events.map((evt) => {
                  const isActive = selectedEventId === evt.id;
                  return (
                    <button
                      key={evt.id}
                      onClick={() => handleSelectEvent(evt.id)}
                      style={{
                        backgroundColor: isActive ? (branding?.primary_color || 'var(--brand-primary)') : undefined,
                        borderColor: isActive ? (branding?.primary_color || 'var(--brand-primary)') : undefined
                      }}
                      className={`px-3.5 py-1.5 rounded-sm text-xs font-bold transition whitespace-nowrap border ${
                        isActive
                          ? 'text-white shadow-sm'
                          : 'bg-subtle text-muted border-grid hover:text-main'
                      }`}
                    >
                      {evt.title}
                    </button>
                  );
                })}
              </div>

              {user && (
                <button
                  onClick={() => { setEventToEdit(null); setActiveTab('event-editor'); }}
                  className="px-3.5 py-1.5 rounded-sm text-xs font-bold bg-subtle hover:bg-surface-hover text-main border border-grid transition flex items-center gap-1.5 shrink-0"
                >
                  <Plus className="w-4 h-4" /> Neues Event
                </button>
              )}
            </div>

            <ShiftMatrixTable
              event={selectedEventData}
              user={user}
              onSignupClick={handleShiftSignupClick}
              onCancelClick={handleCancelSignup}
              onEditEvent={(evt) => {
                setEventToEdit(evt);
                setActiveTab('event-editor');
              }}
              onDeleteEvent={handleDeleteEvent}
              onRemoveUserFromShift={async (shift, signupId) => {
                try {
                  const res = await apiFetch(`/shifts/${shift.id}/signup/${signupId}/`, {
                    method: 'DELETE'
                  });
                  showNotification(res.message || 'Eintragung entfernt.');
                  refreshEvents();
                  if (selectedEventId) {
                    handleSelectEvent(selectedEventId);
                  }
                } catch (err) {
                  alert(err.message || 'Entfernen der Person fehlgeschlagen.');
                }
              }}
              onGenerateClaimLink={handleGenerateClaimLink}
              onExportPdf={handleExportPdf}
              onPrintView={handlePrintView}
              onShareLink={() => handleShareEvent(selectedEventId)}
            />
          </div>
        )}
      </main>

      {/* Footer */}
      <footer className="border-t border-grid py-6 text-center text-xs text-muted font-mono no-print">
        <p>{branding?.app_name || "Veranstaltungsschichtplaner"} • PWA Enabled • PostgreSQL & Docker Ready</p>
      </footer>

      {/* Modals */}
      {showAuthModal && (
        <AuthModal
          onClose={() => { setShowAuthModal(false); setClaimToken(null); setPrefilledGuestName(null); }}
          onSuccess={handleAuthSuccess}
          claimToken={claimToken}
          prefilledGuestName={prefilledGuestName}
        />
      )}

      {showGuestModal && (
        <GuestSignupModal
          shift={guestTargetShift}
          onClose={() => setShowGuestModal(false)}
          onSubmit={handleGuestSubmit}
        />
      )}

      {showProfileModal && (
        <ProfileModal
          user={user}
          skills={skills}
          onClose={() => setShowProfileModal(false)}
          onUserUpdated={(updatedUser) => {
            setUser(updatedUser);
            setShowProfileModal(false);
            refreshEvents();
          }}
          onRefreshSkills={refreshSkills}
        />
      )}
    </div>
  );
}