import React, { useEffect } from 'react'
import { Link } from 'react-router-dom'
import { useStore } from '@nanostores/react'
import {
isStandbyStore,
currentTimeStore,
weatherStore,
showChoicesStore,
showSettingsModalStore,
isVisibleStore,
yenBalanceStore,
toggleStandby,
toggleShowChoices,
updateTime
} from '../stores'
interface VNInterfaceProps {
onLogout: () => void
}
export function VNInterface({ onLogout }: VNInterfaceProps) {
const isStandby = useStore(isStandbyStore)
const currentTime = useStore(currentTimeStore)
const weather = useStore(weatherStore)
const showChoices = useStore(showChoicesStore)
const showSettingsModal = useStore(showSettingsModalStore)
const isVisible = useStore(isVisibleStore)
const yenBalance = useStore(yenBalanceStore)
// Fade in effect on mount
useEffect(() => {
const timer = setTimeout(() => {
isVisibleStore.set(true)
}, 100)
return () => clearTimeout(timer)
}, [])
// Update clock every second (Japan Time)
useEffect(() => {
const timer = setInterval(() => {
const now = new Date()
// Convert to Japan Time (UTC+9)
const japanTime = new Date(now.getTime() + (now.getTimezoneOffset() * 60000) + (9 * 3600000))
updateTime()
}, 1000)
return () => clearInterval(timer)
}, [])
return (
<div className={`vn-interface ${isVisible ? 'fade-in' : 'fade-out'}`}>
{/* Background */}
<div className="vn-background">
<img
src="/__gaogao__56242cbde8f18ac64522e410bad04e68_waifu2x_art_noise2.png"
alt="Background image"
className="background-image"
/>
</div>
{/* Combined Info Panel (Top Right) */}
<div className="floating-info-panel">
<div className="info-panel-content">
{/* Weather Section */}
<div className="weather-section">
<div className="weather-icon">🌤️</div>
<div className="weather-details">
<div className="weather-location">Tokyo</div>
<div className="weather-temp">22°C Sunny</div>
</div>
</div>
{/* Time Section */}
<div className="time-section">
<div className="japan-date">{currentTime.toLocaleDateString('ja-JP', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'short'
})}</div>
<div className="japan-time">{currentTime.toLocaleTimeString('ja-JP', {
hour12: false,
hour: '2-digit',
minute: '2-digit'
})}</div>
</div>
{/* Status Section */}
<div className="status-section">
<div className="status-item">
<span className="info-label">Balance:</span>
<span className="info-value yen-balance">¥{yenBalance.toLocaleString()}</span>
</div>
<div className="status-item">
<span className="info-label">System:</span>
<span
className="info-value live-status clickable"
onClick={toggleStandby}
title="Click to toggle between LIVE and STANDBY"
>
<span className={`status-dot ${isStandby ? 'standby' : 'live'}`}></span>
{isStandby ? 'STDBY' : 'LIVE'}
</span>
</div>
<div className="status-item">
<Link to="/daemons" style={{ color: '#66ccff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px' }}>
<span className="info-label">Mesh:</span>
<span className="info-value">Daemons</span>
</Link>
</div>
<div className="status-item">
<Link to="/contracts" style={{ color: '#66ccff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px' }}>
<span className="info-label">View:</span>
<span className="info-value">Contracts</span>
</Link>
</div>
</div>
</div>
</div>
{/* Main VN Viewport */}
<div className="vn-viewport">
<div className="vn-content">
</div>
</div>
{/* Dialogue Panel (Bottom) */}
<div className="floating-dialogue-panel">
<div className="dialogue-content">
<div className="dialogue-speaker">???</div>
<div className="dialogue-text">
A warm CRT glow fills the room. A figure turns towards you...
</div>
</div>
</div>
{/* Input/Choice Panel (Bottom) */}
<div className="floating-input-panel">
<div className="input-content">
{!showChoices ? (
// Text Input Mode
<input
type="text"
className="vn-text-input"
placeholder="Type your response..."
onKeyPress={(e) => {
if (e.key === 'Enter') {
const target = e.target as HTMLInputElement;
if (target.value.trim()) {
console.log('User input:', target.value);
target.value = '';
}
}
}}
/>
) : (
// Choice Options Mode
<div className="choice-buttons">
<button className="choice-btn" onClick={() => console.log('Choice: Hello?')}>"Hello?"</button>
<button className="choice-btn" onClick={() => console.log('Choice: Who are you?')}>"Who are you?"</button>
<button className="choice-btn" onClick={() => console.log('Choice: Stay silent')}>(Stay silent)</button>
</div>
)}
{/* Toggle Button */}
<button
className="toggle-input-btn"
onClick={toggleShowChoices}
title={showChoices ? "Switch to text input" : "Switch to choice options"}
>
{showChoices ? "⎀" : "≡"}
</button>
</div>
</div>
{/* Floating Settings Button */}
<button className="floating-logout-btn" onClick={() => showSettingsModalStore.set(true)}>
<span className="btn-icon">⚙</span>
<span className="btn-text">Settings</span>
</button>
{/* Settings Modal */}
{showSettingsModal && (
<div className="modal-overlay" onClick={() => showSettingsModalStore.set(false)}>
<div className="settings-modal" onClick={(e) => e.stopPropagation()}>
<div className="modal-header">
<h2 className="modal-title">Settings</h2>
<button className="modal-close-btn" onClick={() => showSettingsModalStore.set(false)}>
×
</button>
</div>
<div className="modal-content">
<div className="settings-section">
<h3>Display Options</h3>
<div className="setting-item">
<label>
<input type="checkbox" defaultChecked /> Enable animations
</label>
</div>
</div>
<div className="settings-section">
<h3>Audio</h3>
<div className="setting-item">
<label>Master Volume</label>
<input type="range" min="0" max="100" defaultValue="75" />
</div>
</div>
</div>
<div className="modal-footer">
<button className="modal-btn secondary" onClick={() => showSettingsModalStore.set(false)}>
Cancel
</button>
<button className="modal-btn logout" onClick={() => { showSettingsModalStore.set(false); onLogout(); }}>
Logout
</button>
</div>
</div>
</div>
)}
</div>
)
}
