'use client'

import { useEffect, useRef, useState } from 'react'

type Screen = 'settings' | 'privacy'

export default function Page() {
  const [screen, setScreen] = useState<Screen>('settings')
  const [demoActive, setDemoActive] = useState(false)
  const [tilted, setTilted] = useState(false)
  const [sensorReady, setSensorReady] = useState(false)
  const [permissionNeeded, setPermissionNeeded] = useState(false)
  const [manualTest, setManualTest] = useState(false)
  const tiltRef = useRef(false)

  useEffect(() => {
    if (!demoActive || typeof window === 'undefined' || !('DeviceOrientationEvent' in window)) return

    const handleOrientation = (event: DeviceOrientationEvent) => {
      const sideways = Math.abs(event.gamma ?? 0) > 48 || Math.abs(event.beta ?? 0) < 28
      if (sideways !== tiltRef.current) {
        tiltRef.current = sideways
        setTilted(sideways)
      }
      setSensorReady(true)
    }

    window.addEventListener('deviceorientation', handleOrientation)
    return () => window.removeEventListener('deviceorientation', handleOrientation)
  }, [demoActive])

  const startDemo = async () => {
    const OrientationEvent = window.DeviceOrientationEvent as typeof DeviceOrientationEvent & {
      requestPermission?: () => Promise<'granted' | 'denied'>
    }
    if (OrientationEvent?.requestPermission) {
      try {
        const permission = await OrientationEvent.requestPermission()
        if (permission !== 'granted') setPermissionNeeded(true)
      } catch {
        setPermissionNeeded(true)
      }
    }
    setDemoActive(true)
    setManualTest(false)
  }

  const stopDemo = () => {
    setDemoActive(false)
    setTilted(false)
    setManualTest(false)
    setPermissionNeeded(false)
  }

  return (
    <main className="app-shell">
      <div className="phone-frame" aria-label="iPhone 12 Privacy Screen demo">
        <div className={`phone-screen ${demoActive && (tilted || manualTest) ? 'is-dimmed' : ''}`}>
          <StatusBar />
          {screen === 'settings' ? (
            <SettingsView onOpenPrivacy={() => setScreen('privacy')} />
          ) : (
            <PrivacyView
              demoActive={demoActive}
              tilted={tilted || manualTest}
              sensorReady={sensorReady}
              permissionNeeded={permissionNeeded}
              onBack={() => { stopDemo(); setScreen('settings') }}
              onStart={startDemo}
              onStop={stopDemo}
              onManualTest={() => setManualTest((value) => !value)}
            />
          )}
          <div className="home-indicator" aria-hidden="true" />
          {demoActive && (tilted || manualTest) && <div className="privacy-shade" aria-hidden="true" />}
        </div>
      </div>
      <p className="outside-note">Designed for iPhone 12 · 390 × 844 px</p>
    </main>
  )
}

function StatusBar() {
  return (
    <div className="status-bar">
      <span>9:33</span>
      <div className="status-icons" aria-label="Wi-Fi and battery status">
        <svg className="wifi-icon" width="18" height="13" viewBox="0 0 18 13" fill="none" aria-hidden="true"><path fillRule="evenodd" clipRule="evenodd" d="M0.387 5.027C.84 5.482 1.546 5.404 2.118 4.91 4.009 3.248 6.366 2.39 9.002 2.39c2.637 0 5.006.884 6.884 2.52.56.507 1.265.559 1.731.117.466-.468.533-1.169.053-1.663C15.673 1.377 12.411 0 9.002 0 5.594 0 2.318 1.39.334 3.377c-.48.481-.427 1.182.053 1.663Zm3.289 3.261c.519.493 1.185.441 1.771-.026A5.88 5.88 0 0 1 9.002 7.028a5.88 5.88 0 0 1 3.555 1.247c.586.468 1.278.494 1.784 0 .493-.494.573-1.247.054-1.715-1.292-1.13-3.236-1.923-5.38-1.923-2.144 0-4.101.793-5.379 1.923-.453.416-.546 1.13.053 1.728Zm4.447 4.312c.573.533 1.172.533 1.744 0l1.079-1.013c.573-.546.692-1.235.04-1.702A3.5 3.5 0 0 0 9.002 9.262c-.746 0-1.452.247-1.984.636-.652.455-.519 1.157.053 1.689l1.065 1.013Z" fill="currentColor" /></svg>
        <svg className="battery-icon" width="30" height="14" viewBox="0 0 30 14" fill="none" aria-hidden="true"><path fillRule="evenodd" clipRule="evenodd" d="M28.54 4.652v4.318C28.979 8.851 30 7.89 30 6.811s-1.021-2.04-1.46-2.159ZM27.441 8.074v1.252c0 .421-.033.831-.11 1.252a3.6 3.6 0 0 1-.505 1.188 3.7 3.7 0 0 1-1.252 1.238 3.5 3.5 0 0 1-1.612.388H4.755a3.5 3.5 0 0 1-1.612-.388 3.7 3.7 0 0 1-1.252-1.238 3.6 3.6 0 0 1-.505-1.188A7.4 7.4 0 0 1 0 9.326V4.663c.011-.421.033-.831.11-1.241a3.6 3.6 0 0 1 .505-1.188A3.7 3.7 0 0 1 1.867.997 3.5 3.5 0 0 1 3.48.108 7.4 7.4 0 0 1 4.755 0h17.92c.428.011.846.032 1.274.108a3.5 3.5 0 0 1 1.613.889c.296.291.549.637.746 1.004.198.378.319.767.396 1.188.077.41.099.831.11 1.252v3.633c.627 0 .627 0 .627 0Z" fill="currentColor" /></svg>
      </div>
    </div>
  )
}

function Chevron({ direction = 'right' }: { direction?: 'left' | 'right' }) {
  return <span className={`chevron chevron-${direction}`} aria-hidden="true" />
}

function SettingsView({ onOpenPrivacy }: { onOpenPrivacy: () => void }) {
  return (
    <section className="view settings-view">
      <header className="nav-header"><button className="back-button" aria-label="Back" disabled><Chevron direction="left" /></button><h1>Display &amp; Brightness</h1><span className="nav-spacer" /></header>
      <div className="settings-content">
        <p className="eyebrow">Brightness</p>
        <div className="brightness-row"><span className="sun sun-small">☼</span><div className="slider"><span /></div><span className="sun">☼</span></div>
        <div className="inset-card display-card">
          <SettingRow title="True Tone" control={<span className="toggle"><span /></span>} description="Automatically adapt iPhone display based on ambient lighting conditions to make colours appear consistent in different environments." />
          <SettingRow title="Night Shift" trailing="08:00 to 07:59" />
          <SettingRow title="Auto-Lock" trailing="5 minutes" />
          <SettingRow title="Raise to Wake" control={<span className="toggle"><span /></span>} />
        </div>
        <div className="inset-card info-card"><div className="setting-group always-on"><h2>Always On Display</h2><p>Dim your Lock Screen while keeping information visible at a glance.</p></div></div>
        <div className="inset-card privacy-card"><div className="setting-group privacy-group"><h2>Privacy</h2><button className="privacy-row" onClick={onOpenPrivacy}><div><strong>Privacy Screen</strong><span>Limit side visibility when in public places</span></div><Chevron /></button></div></div>
      </div>
    </section>
  )
}

function SettingRow({ title, trailing, control, description }: { title: string; trailing?: string; control?: React.ReactNode; description?: string }) {
  return <div className="setting-block"><div className="setting-row"><span>{title}</span>{trailing && <span className="trailing">{trailing}<Chevron /></span>}{control}</div>{description && <p className="setting-description">{description}</p>}</div>
}

function PrivacyView({ demoActive, tilted, sensorReady, permissionNeeded, onBack, onStart, onStop, onManualTest }: { demoActive: boolean; tilted: boolean; sensorReady: boolean; permissionNeeded: boolean; onBack: () => void; onStart: () => void; onStop: () => void; onManualTest: () => void }) {
  return <section className="view privacy-view"><header className="nav-header"><button className="back-button" aria-label="Back to Display & Brightness" onClick={onBack}><Chevron direction="left" /></button><h1>Privacy Screen</h1><span className="nav-spacer" /></header><div className="privacy-content"><div className="preview-window"><div className="preview-card"><div className="preview-lines"><i /><i /><i /><i /></div><span className="preview-label">Private content</span></div><div className="side-fade" /></div><div className="privacy-copy"><div className="title-line"><h2>Privacy Screen</h2><span className="beta-badge">BETA</span></div><p>Helps keep your screen private by limiting visibility from the side. Content stays clear when viewed directly, and personal information is protected in public places.</p></div>{demoActive ? <div className="demo-panel"><div className={`demo-status ${tilted ? 'active' : ''}`}><span className="status-dot" />{tilted ? 'Privacy screen active' : sensorReady ? 'Move your phone sideways' : 'Tilt your phone to test'}</div><button className="action-button stop-button" onClick={onStop}>Stop</button>{permissionNeeded && <p className="permission-copy">Motion access was not granted. Use the button below to simulate a sideways view.</p>}<button className="manual-button" onClick={onManualTest}>{tilted ? 'Return to clear view' : 'Simulate sideways tilt'}</button></div> : <div className="start-panel"><button className="action-button start-button" onClick={onStart}>Try Demo</button><p>Start a live demo to see how your screen dims when your phone is viewed from the side.</p></div>}</div></section>
}