import React, { useState, useCallback, useEffect } from 'react'; import { DigitalFace } from 'DigitalFace'; // Import the face component import { Menu } from 'Menu'; // Import the Menu component import { CreditsScreen } from 'CreditsScreen'; // Import the CreditsScreen component import { VisualsMenu } from 'VisualsMenu'; // Import the VisualsMenu component import { themes } from 'themes'; // Import the theme definitions import { useTheme } from 'ThemeContext'; // Keep useTheme hook for applying the theme // Removed themes import - App handles theme objects now export const ChatInterface = ({ onSelectTheme }) => { // Receive onSelectTheme as prop const theme = useTheme(); // Get the CURRENT theme object from context provided by App const [inputValue, setInputValue] = useState(''); const [outputValue, setOutputValue] = useState(''); // Stores the calculated (incorrect) result const [hoveredButtonIndex, setHoveredButtonIndex] = useState(null); // Tracks which button is hovered const [isLaughing, setIsLaughing] = useState(false); // State for face animation const [isMenuOpen, setIsMenuOpen] = useState(false); // State for menu visibility const [isCreditsOpen, setIsCreditsOpen] = useState(false); // State for credits visibility const [isVisualsMenuOpen, setIsVisualsMenuOpen] = useState(false); // State for visuals menu // Removed currentThemeName state - managed by App.js const [buttonFontSize, setButtonFontSize] = useState('2.5em'); // Initial default size // Effect to update font size based on screen width useEffect(() => { const updateFontSize = () => { // Example breakpoint: increase size for screens narrower than 600px if (window.innerWidth < 600) { setButtonFontSize('3.5em'); // Larger font size for mobile } else { setButtonFontSize('2.5em'); // Default font size for larger screens } }; updateFontSize(); // Set initial size window.addEventListener('resize', updateFontSize); // Update on resize // Cleanup listener on component unmount return () => window.removeEventListener('resize', updateFontSize); }, []); // Empty dependency array ensures this runs only once on mount and cleans up on unmount const handleInputChange = (event) => { // Allow numbers, basic operators (+-*/), decimal point, and spaces const validInput = /^[0-9+\-*/.\s]*$/; if (validInput.test(event.target.value)) { setInputValue(event.target.value); } }; const handleButtonClick = (value) => { if (value === 'C') { // Clear Input setInputValue(''); setOutputValue(''); // Also clear output } else if (value === 'CE') { // Clear Everything (Input and Output) // Removed setMessages([]) setInputValue(''); setOutputValue(''); // Clear output too } else if (value === '⌫') { // Backspace setInputValue(prev => prev.slice(0, -1)); } else if (value === '=') { handleCalculate(); // Renamed from handleSendMessage } else { // If there's an output value, start a new input if (outputValue) { setInputValue(value); setOutputValue(''); } else { setInputValue(prev => prev + value); } } }; // Renamed from handleSendMessage, removed async, removed AI call // --- Define Incorrect Calculation Methods --- const calcMethod1_addRandom = (input) => { const match = input.match(/[+-]?([0-9]*[.])?[0-9]+/); if (!match || !match[0]) return "7"; // Default if no number const firstNumber = parseFloat(match[0]); const randomAdd = Math.floor(Math.random() * 10) + 1; // Add 1 to 10 const result = firstNumber + randomAdd + (Math.random() * 0.8 + 0.1); // Add 0.1 to 0.9 return result.toFixed(2); // Ensure it has decimals and isn't accidentally whole }; const calcMethod2_multiplySmall = (input) => { const match = input.match(/[+-]?([0-9]*[.])?[0-9]+/); if (!match || !match[0]) return "42"; // Default if no number const firstNumber = parseFloat(match[0]); const randomMultiplier = Math.floor(Math.random() * 2) + 2; // Multiply by 2 or 3 const result = (firstNumber * randomMultiplier) - (Math.random() * 0.8 + 0.1); // Subtract 0.1 to 0.9 return result.toFixed(2); // Ensure it has decimals }; const calcMethod3_extremeNumbers = (input) => { const match = input.match(/[+-]?([0-9]*[.])?[0-9]+/); let baseNumber = Math.random() * 10 + 1; // Default if no number found if (match && match[0]) { baseNumber = parseFloat(match[0]) || baseNumber; // Use parsed number or default } // Randomly decide whether to go big or small if (Math.random() > 0.5) { // Go BIG const exponent = Math.floor(Math.random() * 15) + 5; // Power between 5 and 20 const result = Math.pow(baseNumber, exponent); // Use toString() to display the full number, handle Infinity if (!isFinite(result)) { return "Infinity (Basically)"; // Or just "Infinity" } // Convert to string, potentially very long! return result.toString(); } else { // Go SMALL (decimal) - Generate more varied small numbers // Generate a random number between 0 and 1 let randomDecimal = Math.random(); // Occasionally make it even smaller by dividing if (Math.random() > 0.6) { // 40% chance to make it smaller randomDecimal /= (Math.random() * 990 + 10); // Divide by 10 to 1000 } // Use the input base number to slightly influence the result, but keep it small const result = (randomDecimal * (baseNumber / 10 + 1)) / (Math.random() * 5 + 1); // Add some more randomness return result.toFixed(8); // Keep 8 decimal places, e.g., 0.12345678 or 0.00987654 } }; const calcMethod4_fixedSilly = (input) => { const sillyAnswers = ["Fish", "Banana", "Why?", "12345", "Nope"]; return sillyAnswers[Math.floor(Math.random() * sillyAnswers.length)]; }; const incorrectMethods = [ calcMethod1_addRandom, calcMethod2_multiplySmall, calcMethod3_extremeNumbers, // Replaced reverse string method calcMethod4_fixedSilly, ]; const handleCalculate = useCallback(() => { const trimmedInput = inputValue.trim(); if (!trimmedInput) return; // Don't calculate if input is empty // --- Flavor Text --- const flavorTexts = [ "Calculating... poorly...", "Let me not think about that...", "Hmmm, according to my 'advanced' algorithms...", "Processing... with enthusiasm!", "Okay, the answer is definitely...", "Hold on, crunching the wrong numbers...", "Pretty sure it's this:", "Beep boop... wrong answer incoming:", ]; const randomFlavor = flavorTexts[Math.floor(Math.random() * flavorTexts.length)]; // --- Select and Execute Random Incorrect Calculation --- let calculation = 'Error?'; // Default try { // Randomly select one of the calculation methods const randomIndex = Math.floor(Math.random() * incorrectMethods.length); const selectedMethod = incorrectMethods[randomIndex]; calculation = selectedMethod(trimmedInput); } catch (e) { console.error("Calculation error (intended or not):", e); calculation = 'Maths are hard!'; } // Combine flavor text and the incorrect calculation const finalOutput = `${randomFlavor} ${calculation}`; setOutputValue(finalOutput); // Trigger laughing animation setIsLaughing(true); setTimeout(() => setIsLaughing(false), 2000); // Laugh for 2000ms to allow animation cycle // Input is NOT cleared here, mirroring some calculators // setInputValue(''); }, [inputValue, incorrectMethods, setIsLaughing]); // Added incorrectMethods and setIsLaughing to dependencies const handleKeyDown = (event) => { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); // Prevent newline on Enter handleCalculate(); // Use the new handler name } }; const toggleMenu = () => { // Only toggle the menu if credits are not open if (!isCreditsOpen) { setIsMenuOpen(prev => !prev); } // Close credits if the menu is being opened (e.g., clicking face again) if (isCreditsOpen) { setIsCreditsOpen(false); } }; const showCredits = () => { setIsMenuOpen(false); // Close the menu setIsCreditsOpen(true); // Open credits }; const hideCredits = () => { setIsCreditsOpen(false); // Close credits setIsMenuOpen(true); // Re-open the main menu }; const showVisualsMenu = () => { setIsMenuOpen(false); // Close main menu setIsVisualsMenuOpen(true); // Open visuals menu }; const hideVisualsMenu = () => { setIsVisualsMenuOpen(false); // Close visuals menu setIsMenuOpen(true); // Re-open main menu }; // Theme selection is now handled by the onSelectTheme prop passed from App.js const handleSelectThemeInternal = (themeName) => { onSelectTheme(themeName); // Call the handler passed from App setIsVisualsMenuOpen(false); // Still close the menu here // setIsMenuOpen(true); // Optional: re-open main menu }; // Style adjustments based on theme (already using 'theme' from useTheme) const calculatorContainerStyle = { ...styles.calculatorContainer, backgroundColor: theme.background, borderColor: theme.menuBorder || '#282828', // Use menu border or fallback }; const displayAreaStyle = { ...styles.displayArea, backgroundColor: theme.displayBackground, borderBottomColor: theme.menuBorder || '#444', // Match container border }; const displayInputStyle = { ...styles.displayInput, color: theme.displayInputText, }; const displayOutputStyle = { ...styles.displayOutput, color: theme.displayOutputText, }; return (

{/* Pass the correct state */}

{isMenuOpen && !isCreditsOpen && !isVisualsMenuOpen && ( )} {isCreditsOpen && } {isVisualsMenuOpen && ( )} {/* Calculator Display Area - Use themed styles */}

{/* Show current inputValue, or '0' if empty and no output exists */}

{inputValue || (outputValue ? '' : '0')}

{/* Show the calculated outputValue */}

{outputValue}

{/* Removed loading indicator */}

{/* Button Grid Area */}

{/* Define button layout */} {['C', 'CE', '⌫', '/', // Replaced empty slot with Backspace ('⌫') '7', '8', '9', '*', '4', '5', '6', '-', '1', '2', '3', '+', // New layout: '0' spans 2, then '.', then '=' '0', '.', '='].map((btn, index) => ( ))}

{/* Removed AI initialization error message */}

); }; // Helper function to get style based on button type, now accepting theme const getButtonStyle = (btn, isHovered, fontSize, theme) => { // Base style includes dynamic font size and basic theme colors let style = { ...styles.button, // Base structure from static styles fontSize: fontSize, backgroundColor: theme.button, color: theme.buttonText, }; // Apply specific theme colors based on button type if (['/', '*', '-', '+'].includes(btn)) { // Operators (excluding '=') style.backgroundColor = theme.operatorButton; style.color = theme.operatorButtonText; } if (btn === 'C' || btn === 'CE' || btn === '⌫') { // Clear/Backspace style.backgroundColor = theme.clearButton; style.color = theme.clearButtonText; } if (btn === '=') { // Equals button style.backgroundColor = theme.equalsButton; style.color = theme.equalsButtonText; } // Apply hover styles based on theme colors if applicable if (isHovered && btn) { // Only apply hover if button exists if (btn === 'C' || btn === 'CE' || btn === '⌫') { style.backgroundColor = theme.clearButtonHover; } else if (btn === '=') { // Separate hover for equals style.backgroundColor = theme.equalsButtonHover; } else if (['/', '*', '-', '+'].includes(btn)) { // Operator hover style.backgroundColor = theme.operatorButtonHover; } else { // General number/dot hover style.backgroundColor = theme.buttonHover; } } // Special layout rules if (btn === '0') { style.gridColumn = 'span 2'; // Make '0' button span 2 columns } return style; }; // Updated styles for calculator look const styles = { calculatorContainer: { width: '100%', // Fill the width of the parent (now the whole screen) maxWidth: '100%', // Remove max width constraint height: '100%', // Fill the height of the parent (now the whole screen) border: '1px solid #282828', // Will be overridden by theme border borderRadius: '12px', // Slightly increased border radius display: 'flex', flexDirection: 'column', overflow: 'hidden', // Important for shadow respecting border radius fontFamily: "'VT323', monospace", // Updated digital-style font backgroundColor: '#333', // Will be overridden by theme background boxShadow: '0 6px 18px rgba(0, 0, 0, 0.35)', // Refined shadow for more depth }, displayArea: { backgroundColor: '#8fbc8f', // Will be overridden by theme displayBackground padding: '37.5px', // 15px * 2.5 minHeight: '200px', // 80px * 2.5 display: 'flex', flexDirection: 'column', justifyContent: 'space-between', borderBottom: '1px solid #444', // Will be overridden by theme menuBorder position: 'relative', // For loading indicator positioning }, displayInput: { fontSize: '5.5em', // Increased font size color: '#222', // Will be overridden by theme displayInputText textAlign: 'right', minHeight: '3.0em', // 1.2em * 2.5 wordWrap: 'break-word', overflowWrap: 'break-word', }, displayOutput: { fontSize: '4.0em', // Increased font size color: '#444', // Will be overridden by theme displayOutputText textAlign: 'right', minHeight: '3.0em', // 1.2em * 2.5 wordWrap: 'break-word', overflowWrap: 'break-word', }, // REMOVED inputArea and inputField styles as they are replaced by buttons buttonGrid: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', // 4 columns gap: '1px', // Thin gap between buttons backgroundColor: '#555', // Background for the grid gaps - Keep this as a neutral gap color? padding: '1px', // Padding around the grid flexGrow: 1, // Allow the grid to expand vertically }, // Base button structure - Colors are now applied in getButtonStyle using the theme button: { padding: '15px', // fontSize: '2.5em', // Set dynamically in getButtonStyle border: 'none', // backgroundColor: '#666', // Applied from theme // color: 'white', // Applied from theme cursor: 'pointer', transition: 'background-color 0.2s', textAlign: 'center', outline: 'none', borderRadius: '0', // Square buttons width: '100%', // Fill cell width height: '100%', // Fill cell height }, // --- Removed static theme color definitions for buttons --- // Removed: buttonHover, operatorButton, operatorButtonHover, // clearButton, clearButtonHover, equalsButton loadingIndicator: { // Keep non-theme related styles position: 'absolute', bottom: '5px', left: '15px', color: '#555', // Maybe theme this later? fontStyle: 'italic', fontSize: '0.8em', }, errorText: { // Keep non-theme related styles color: '#ff6b6b', // Brighter red for dark background textAlign: 'center', padding: '10px', fontSize: '0.9em', backgroundColor: '#555', // Maybe theme this later? } }; // Removed note about ChatManager