373 lines
15 KiB
TypeScript
373 lines
15 KiB
TypeScript
|
|
import React, { useState, useEffect } from 'react';
|
|
import { WizardState, Step, GeneratedContent } from './types';
|
|
import StepContext from './components/StepContext';
|
|
import StepPlatform from './components/StepPlatform';
|
|
import StepEventType from './components/StepEventType';
|
|
import StepToneGoal from './components/StepToneGoal';
|
|
import StepDetails from './components/StepDetails';
|
|
import StepResult from './components/StepResult';
|
|
import { ChevronLeft, ExternalLink, Sparkles, User, Lock, ArrowRight, AlertCircle, Bug } from 'lucide-react';
|
|
import { generateStoryContent } from './services/geminiService';
|
|
import { getEnvVar } from './utils/envUtils';
|
|
|
|
// --- CONFIG IMPORT ---
|
|
import { AUTHOR_CONFIG } from './_EDITABLE_CONFIG/author';
|
|
import { UI_TEXT } from './_EDITABLE_CONFIG/ui_text';
|
|
|
|
const STORAGE_KEY = 'gpx-storyteller-state-v6';
|
|
const AUTH_KEY = 'promptstory-auth-token';
|
|
|
|
const APP_PASSWORD = getEnvVar('VITE_APP_PASSWORD');
|
|
|
|
const INITIAL_STATE: WizardState = {
|
|
step: Step.CONTEXT,
|
|
context: null,
|
|
storyStyle: null,
|
|
platform: null,
|
|
eventType: null,
|
|
tone: null,
|
|
goal: null,
|
|
title: 'Poznań Maraton 2025',
|
|
description: 'Byłem totalnie nieprzygotowany. Ostatnie pół roku prawie nie ćwiczyłem, a w dodatku biegłem na antybiotykach z zapaleniem osemki. To była walka a nie przyjemność z biegania. To było głupie. Ale było warto',
|
|
files: [],
|
|
stats: {
|
|
distance: '',
|
|
duration: '',
|
|
elevation: '',
|
|
},
|
|
waypoints: [],
|
|
tripData: {
|
|
startPoint: { place: '', description: '' },
|
|
endPoint: { place: '', description: '' },
|
|
stops: [],
|
|
travelMode: null,
|
|
googleMapsKey: ''
|
|
}
|
|
};
|
|
|
|
const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogin }) => {
|
|
const [input, setInput] = useState('');
|
|
const [error, setError] = useState(false);
|
|
const isConfigMissing = !APP_PASSWORD;
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (input.trim() === APP_PASSWORD) {
|
|
onLogin(true);
|
|
} else {
|
|
setError(true);
|
|
setInput('');
|
|
}
|
|
};
|
|
|
|
if (isConfigMissing) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
|
|
<div className="bg-white p-8 rounded-xl shadow-lg border border-red-200 max-w-md w-full text-center">
|
|
<Bug className="mx-auto text-red-500 mb-4" size={48} />
|
|
<h2 className="text-xl font-bold text-gray-900">{UI_TEXT.login.configError}</h2>
|
|
<p className="text-gray-600 mt-2 text-sm">
|
|
Missing VITE_APP_PASSWORD.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
|
|
<div className="bg-white p-8 rounded-xl shadow-lg border border-gray-100 max-w-md w-full text-center space-y-6 animate-fade-in relative">
|
|
<div className="flex justify-center mb-2">
|
|
<div className="bg-[#EA4420]/10 p-4 rounded-full text-[#EA4420]">
|
|
<Lock size={32} />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-gray-900">{UI_TEXT.login.title}</h2>
|
|
<p className="text-gray-500 mt-2">{UI_TEXT.login.desc}</p>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<input
|
|
type="password"
|
|
value={input}
|
|
onChange={(e) => {
|
|
setInput(e.target.value);
|
|
setError(false);
|
|
}}
|
|
placeholder="Hasło..."
|
|
className={`w-full p-4 border rounded-lg outline-none transition-all font-medium text-center tracking-widest ${
|
|
error
|
|
? 'border-red-300 bg-red-50 focus:border-red-500'
|
|
: 'border-gray-200 focus:border-[#EA4420] focus:ring-1 focus:ring-[#EA4420]'
|
|
}`}
|
|
autoFocus
|
|
/>
|
|
{error && (
|
|
<div className="flex items-center justify-center gap-2 text-red-500 text-sm font-medium animate-pulse">
|
|
<AlertCircle size={16} />
|
|
<span>{UI_TEXT.login.error}</span>
|
|
</div>
|
|
)}
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-[#EA4420] text-white py-4 rounded-lg font-bold hover:bg-[#d63b1a] transition-colors flex items-center justify-center gap-2"
|
|
>
|
|
<span>{UI_TEXT.login.btn}</span>
|
|
<ArrowRight size={20} />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
|
const [isAuthChecking, setIsAuthChecking] = useState(true);
|
|
const [data, setData] = useState<WizardState>(INITIAL_STATE);
|
|
const [generatedContent, setGeneratedContent] = useState<GeneratedContent | null>(null);
|
|
const [isGenerating, setIsGenerating] = useState(false);
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
|
|
// LOGO & AVATAR STATE: Default to false (no error), so we try to show image first.
|
|
const [logoError, setLogoError] = useState(false);
|
|
const [avatarError, setAvatarError] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const storedAuth = localStorage.getItem(AUTH_KEY);
|
|
if (storedAuth === 'true') setIsAuthenticated(true);
|
|
setIsAuthChecking(false);
|
|
}, []);
|
|
|
|
const handleLogin = (success: boolean) => {
|
|
if (success) {
|
|
localStorage.setItem(AUTH_KEY, 'true');
|
|
setIsAuthenticated(true);
|
|
}
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem(AUTH_KEY);
|
|
setIsAuthenticated(false);
|
|
resetApp();
|
|
};
|
|
|
|
useEffect(() => {
|
|
const saved = localStorage.getItem(STORAGE_KEY);
|
|
if (saved) {
|
|
try {
|
|
const parsed = JSON.parse(saved);
|
|
parsed.files = [];
|
|
if (!parsed.stats) parsed.stats = { distance: '', duration: '', elevation: '' };
|
|
if (!parsed.waypoints) parsed.waypoints = [];
|
|
if (!parsed.tripData) parsed.tripData = { ...INITIAL_STATE.tripData };
|
|
if (!parsed.tone) parsed.tone = null;
|
|
if (!parsed.goal) parsed.goal = null;
|
|
if (!parsed.storyStyle) parsed.storyStyle = null;
|
|
setData(parsed);
|
|
} catch (e) {
|
|
console.error("Failed to load state", e);
|
|
}
|
|
}
|
|
setIsLoaded(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (isLoaded) {
|
|
const stateToSave = { ...data, files: [] };
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave));
|
|
}
|
|
}, [data, isLoaded]);
|
|
|
|
const updateData = (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => {
|
|
setData(prev => {
|
|
const newValues = typeof updates === 'function' ? updates(prev) : updates;
|
|
return { ...prev, ...newValues };
|
|
});
|
|
};
|
|
|
|
const nextStep = () => {
|
|
if (data.step < Step.RESULT) updateData({ step: data.step + 1 });
|
|
};
|
|
|
|
const prevStep = () => {
|
|
if (data.step > Step.CONTEXT) updateData({ step: data.step - 1 });
|
|
};
|
|
|
|
const handleGenerate = async () => {
|
|
setIsGenerating(true);
|
|
setErrorMessage(null);
|
|
const apiKey = getEnvVar('VITE_API_KEY');
|
|
if (!apiKey) {
|
|
setErrorMessage("BŁĄD: Brak VITE_API_KEY.");
|
|
setIsGenerating(false);
|
|
return;
|
|
}
|
|
try {
|
|
const content = await generateStoryContent(data, apiKey);
|
|
setGeneratedContent(content);
|
|
updateData({ step: Step.RESULT });
|
|
} catch (error: any) {
|
|
setErrorMessage("Błąd: " + (error.message || 'Unknown'));
|
|
} finally {
|
|
setIsGenerating(false);
|
|
}
|
|
};
|
|
|
|
const handleRegenerate = async (slideCount: number, feedback: string) => {
|
|
setIsGenerating(true);
|
|
setErrorMessage(null);
|
|
const apiKey = getEnvVar('VITE_API_KEY');
|
|
try {
|
|
const content = await generateStoryContent(data, apiKey || '', { slideCount, feedback });
|
|
setGeneratedContent(content);
|
|
} catch (error: any) {
|
|
setErrorMessage("Błąd: " + (error.message || ''));
|
|
} finally {
|
|
setIsGenerating(false);
|
|
}
|
|
};
|
|
|
|
const resetApp = () => {
|
|
setData({ ...INITIAL_STATE });
|
|
setGeneratedContent(null);
|
|
localStorage.removeItem(STORAGE_KEY);
|
|
window.location.reload();
|
|
};
|
|
|
|
if (isAuthChecking || !isLoaded) return null;
|
|
if (!isAuthenticated) return <LoginScreen onLogin={handleLogin} />;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white text-gray-900 flex flex-col font-sans">
|
|
<header className="bg-white sticky top-0 z-10 border-b border-gray-100">
|
|
<div className="max-w-4xl mx-auto px-6 py-4 flex justify-between items-center">
|
|
<div className="flex items-center space-x-3">
|
|
{/* LOGO LOGIC: Try to show image. If error, fallback to icon/text. */}
|
|
{!logoError ? (
|
|
<img
|
|
src="logo.png"
|
|
alt="Logo"
|
|
onError={() => setLogoError(true)}
|
|
className="h-10 object-contain"
|
|
/>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<div className="text-[#EA4420]"><Sparkles size={32} strokeWidth={2} /></div>
|
|
<h1 className="text-xl font-bold tracking-tight text-gray-900">{UI_TEXT.header.appTitle}</h1>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<button onClick={resetApp} className="text-xs font-medium text-gray-400 hover:text-[#EA4420] transition-colors uppercase tracking-wide">
|
|
{UI_TEXT.header.resetBtn}
|
|
</button>
|
|
<button onClick={handleLogout} className="text-xs font-medium text-gray-400 hover:text-red-500 transition-colors uppercase tracking-wide">
|
|
{UI_TEXT.header.logoutBtn}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="max-w-4xl mx-auto px-6 py-10 flex-grow w-full">
|
|
{data.step !== Step.RESULT && (
|
|
<div className="mb-12">
|
|
<div className="flex justify-between mb-3">
|
|
{UI_TEXT.steps.labels.map((label, idx) => (
|
|
<span key={label} className={`text-xs font-bold uppercase tracking-wider transition-colors ${data.step >= idx ? 'text-[#EA4420]' : 'text-gray-300'}`}>
|
|
0{idx + 1}. {label}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<div className="h-1 bg-gray-100 rounded-full overflow-hidden">
|
|
<div className="h-full bg-[#EA4420] transition-all duration-500 ease-out" style={{ width: `${((data.step + 1) / 5) * 100}%` }} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-white min-h-[400px]">
|
|
{data.step === Step.CONTEXT && <StepContext data={data} updateData={updateData} nextStep={nextStep} />}
|
|
{data.step === Step.EVENT_TYPE && <StepEventType data={data} updateData={updateData} nextStep={nextStep} />}
|
|
{data.step === Step.PLATFORM && <StepPlatform data={data} updateData={updateData} nextStep={nextStep} />}
|
|
{data.step === Step.TONE_GOAL && <StepToneGoal data={data} updateData={updateData} nextStep={nextStep} />}
|
|
{data.step === Step.DETAILS && <StepDetails data={data} updateData={updateData as any} onGenerate={handleGenerate} isGenerating={isGenerating} />}
|
|
{data.step === Step.RESULT && generatedContent && <StepResult content={generatedContent} onRegenerate={handleRegenerate} isRegenerating={isGenerating} tripData={data.tripData} />}
|
|
|
|
{errorMessage && (
|
|
<div className="mt-6 p-4 bg-red-50 text-red-600 rounded-md border border-red-100 text-sm text-center">
|
|
{errorMessage}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{data.step > Step.CONTEXT && data.step < Step.RESULT && (
|
|
<div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-4 md:static md:bg-transparent md:border-0 md:p-0 mt-12 mb-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
<button
|
|
onClick={prevStep}
|
|
disabled={isGenerating}
|
|
className="flex items-center space-x-2 text-gray-500 hover:text-gray-900 font-semibold px-6 py-3 rounded-md border border-gray-200 hover:bg-gray-50 transition-colors disabled:opacity-50"
|
|
>
|
|
<ChevronLeft size={20} />
|
|
<span>{UI_TEXT.steps.nav.back}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
|
|
{/* FOOTER - Uses AUTHOR_CONFIG */}
|
|
<footer className="border-t border-gray-100 py-10 bg-gray-50/30 mt-auto">
|
|
<div className="max-w-4xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-8">
|
|
<div className="flex items-start md:items-center gap-5">
|
|
<div className="relative group cursor-pointer flex-shrink-0">
|
|
<div className="absolute -inset-0.5 bg-gradient-to-r from-[#EA4420] to-orange-400 rounded-full opacity-30 group-hover:opacity-100 transition duration-500 blur"></div>
|
|
|
|
{/* AVATAR LOGIC */}
|
|
{!avatarError ? (
|
|
<img
|
|
src={AUTHOR_CONFIG.avatarImage}
|
|
alt={AUTHOR_CONFIG.name}
|
|
onError={() => setAvatarError(true)}
|
|
className="relative w-20 h-20 rounded-full object-cover border border-gray-100 bg-white"
|
|
/>
|
|
) : (
|
|
<div className="relative w-20 h-20 rounded-full border border-gray-100 bg-white flex items-center justify-center text-gray-300">
|
|
<User size={40} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="text-left">
|
|
<h3 className="text-gray-900 font-bold text-xl leading-tight">{AUTHOR_CONFIG.name}</h3>
|
|
<p className="text-gray-600 text-sm mt-2 leading-relaxed max-w-lg">
|
|
{AUTHOR_CONFIG.description}
|
|
</p>
|
|
<div className="flex flex-wrap gap-2 mt-3">
|
|
{AUTHOR_CONFIG.tags.map(tag => (
|
|
<span key={tag} className="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-md">{tag}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a
|
|
href={AUTHOR_CONFIG.websiteUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex-shrink-0 flex items-center space-x-2 text-sm font-bold text-gray-700 hover:text-[#EA4420] transition-all bg-white border border-gray-200 px-6 py-3 rounded-full hover:shadow-md hover:border-[#EA4420]/30 active:scale-95"
|
|
>
|
|
<span>{AUTHOR_CONFIG.websiteLabel}</span>
|
|
<ExternalLink size={16} />
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|