smart-home-tablet/components/FocusCard.tsx

'use client'

import { useEffect, useMemo, useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import {
  Umbrella, Wind, ThermometerSun, TramFront, Calendar as CalendarIcon,
  Receipt, Sparkles, Moon, Sun,
} from 'lucide-react'

// ——————————————————————————————
// Types
// ——————————————————————————————

export interface FocusWeather {
  temp: string
  desc: string
  feelsLike?: string
}

export interface FocusTram {
  route: string
  minutes: number
  direction: string
}

export interface FocusEvent {
  id: string
  title: string
  start: string
  allDay?: boolean
  ownerName?: string
  color?: string
}

export interface FocusCountdown {
  label: string
  date: string // ISO YYYY-MM-DD
}

export interface FocusBill {
  title: string
  amount: string
  daysLeft: number
}

interface Props {
  weather: FocusWeather | null
  tramNext?: FocusTram | null
  nextEvent?: FocusEvent | null
  countdowns?: FocusCountdown[]
  bills?: FocusBill[]
}

// ——————————————————————————————
// Focus state machine
// ——————————————————————————————

type FocusKind =
  | { kind: 'morning-outfit'; tempNow: string; feels: string; advice: string; Icon: any; accent: string }
  | { kind: 'tram-imminent'; route: string; minutes: number; direction: string }
  | { kind: 'event-upcoming'; title: string; inMinutes: number; owner?: string; color?: string }
  | { kind: 'countdown'; label: string; days: number }
  | { kind: 'bill-due'; title: string; amount: string; daysLeft: number }
  | { kind: 'night'; hour: number }
  | { kind: 'quiet'; greeting: string }

function pickFocus(p: Props, hour: number): FocusKind {
  // 1. Bill due today / tomorrow — всегда приоритет
  const bill = p.bills?.find(b => b.daysLeft <= 1)
  if (bill) return { kind: 'bill-due', ...bill }

  // 2. Ближайшее событие ≤30 минут
  if (p.nextEvent && !p.nextEvent.allDay) {
    const start = new Date(p.nextEvent.start).getTime()
    const inMin = Math.round((start - Date.now()) / 60_000)
    if (inMin >= -5 && inMin <= 30) {
      return {
        kind: 'event-upcoming',
        title: p.nextEvent.title,
        inMinutes: inMin,
        owner: p.nextEvent.ownerName,
        color: p.nextEvent.color,
      }
    }
  }

  // 3. Трамвай в рабочий час, ≤3 мин
  const rushHour = (hour >= 7 && hour <= 10) || (hour >= 17 && hour <= 20)
  if (rushHour && p.tramNext && p.tramNext.minutes >= 0 && p.tramNext.minutes <= 3) {
    return { kind: 'tram-imminent', ...p.tramNext }
  }

  // 4. Утро (7-10) → одевалка
  if (hour >= 7 && hour < 11 && p.weather) {
    const t = parseInt(p.weather.temp, 10)
    const descLower = p.weather.desc?.toLowerCase() || ''
    const rain = /дожд|ливен|грозa|морос/.test(descLower)
    const snow = /снег|метел/.test(descLower)
    const advice =
      rain ? 'возьми зонт' :
      snow ? 'шапка и зимняя обувь' :
      t <= -10 ? 'пуховик, шапка, перчатки' :
      t < 0 ? 'шапка и перчатки' :
      t < 7 ? 'тёплая куртка' :
      t < 15 ? 'лёгкая куртка' :
      t < 22 ? 'свитер или рубашка' : 'футболка'
    const Icon = rain ? Umbrella : snow ? Wind : t < 0 ? Wind : ThermometerSun
    const accent =
      rain ? 'var(--data-cool)' :
      snow ? 'var(--data-info)' :
      t < 0 ? 'var(--data-info)' :
      t >= 22 ? 'var(--data-warm)' : 'var(--data-warm)'
    return {
      kind: 'morning-outfit',
      tempNow: p.weather.temp,
      feels: p.weather.feelsLike || '',
      advice, Icon, accent,
    }
  }

  // 5. Ближайший countdown (≤14 дней)
  const cd = (p.countdowns || [])
    .map(c => {
      const target = new Date(c.date + 'T00:00:00').getTime()
      const days = Math.ceil((target - Date.now()) / 86_400_000)
      return { label: c.label, days }
    })
    .filter(c => c.days >= 0 && c.days <= 14)
    .sort((a, b) => a.days - b.days)[0]
  if (cd) return { kind: 'countdown', ...cd }

  // 6. Ночь
  if (hour >= 22 || hour < 5) return { kind: 'night', hour }

  // 7. Тихо — приветствие
  const greeting =
    hour >= 5 && hour < 12 ? 'Доброе утро' :
    hour >= 12 && hour < 17 ? 'Добрый день' :
    hour >= 17 && hour < 22 ? 'Добрый вечер' : 'Доброй ночи'
  return { kind: 'quiet', greeting }
}

// ——————————————————————————————
// Presentations
// ——————————————————————————————

function Eyebrow({ children }: { children: React.ReactNode }) {
  return (
    <div style={{
      fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
      textTransform: 'uppercase', color: 'var(--text-tertiary)',
    }}>
      {children}
    </div>
  )
}

function FocusShell({
  eyebrow,
  accent,
  children,
}: {
  eyebrow: React.ReactNode
  accent: string
  children: React.ReactNode
}) {
  return (
    <div
      className="focus-card grain"
      style={{
        padding: '26px 28px',
        display: 'flex', flexDirection: 'column',
        minHeight: 220,
        background: `linear-gradient(180deg, color-mix(in srgb, ${accent} 10%, var(--surface-1)), var(--surface-1))`,
        border: `1px solid color-mix(in srgb, ${accent} 22%, var(--border-subtle))`,
      }}
    >
      {/* Top eyebrow */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        {eyebrow}
      </div>
      {children}
    </div>
  )
}

// ——————————————————————————————
// Individual states
// ——————————————————————————————

function MorningOutfit(f: Extract<FocusKind, { kind: 'morning-outfit' }>) {
  return (
    <FocusShell
      accent={f.accent}
      eyebrow={<>
        <f.Icon size={16} color={f.accent} strokeWidth={2} />
        <Eyebrow>Собираясь на улицу</Eyebrow>
      </>}
    >
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 16 }}>
        <div className="num-display" style={{ fontSize: 96, color: 'var(--text-primary)' }}>
          {f.tempNow}°
        </div>
        {f.feels && (
          <div style={{ fontSize: 15, color: 'var(--text-secondary)' }}>
            ощущается <span className="num" style={{ fontWeight: 700, color: 'var(--text-primary)' }}>{f.feels}°</span>
          </div>
        )}
      </div>
      <div style={{
        fontSize: 22, fontWeight: 700, color: 'var(--text-primary)',
        letterSpacing: '-0.3px', lineHeight: 1.3,
      }}>
        {f.advice}
      </div>
    </FocusShell>
  )
}

function TramImminent(f: Extract<FocusKind, { kind: 'tram-imminent' }>) {
  const accent = 'var(--data-hot)'
  return (
    <FocusShell
      accent={accent}
      eyebrow={<>
        <TramFront size={16} color={accent} strokeWidth={2} />
        <Eyebrow>Трамвай подходит</Eyebrow>
      </>}
    >
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 14 }}>
        <div className="num-display" style={{ fontSize: 96, color: accent }}>
          {f.minutes <= 0 ? 'сейчас' : f.minutes}
        </div>
        {f.minutes > 0 && (
          <div style={{ fontSize: 24, fontWeight: 600, color: 'var(--text-secondary)' }}>мин</div>
        )}
      </div>
      <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>
        Маршрут {f.route} · {f.direction}
      </div>
    </FocusShell>
  )
}

function EventUpcoming(f: Extract<FocusKind, { kind: 'event-upcoming' }>) {
  const accent = f.color || 'var(--accent)'
  const timeWord = f.inMinutes < 0 ? 'сейчас' : f.inMinutes === 0 ? 'сейчас' : `через ${f.inMinutes}м`
  return (
    <FocusShell
      accent={accent}
      eyebrow={<>
        <CalendarIcon size={16} color={accent} strokeWidth={2} />
        <Eyebrow>{timeWord}</Eyebrow>
      </>}
    >
      <div style={{
        fontSize: 32, fontWeight: 800, color: 'var(--text-primary)',
        letterSpacing: '-0.8px', lineHeight: 1.15, marginBottom: 14,
      }}>
        {f.title}
      </div>
      {f.owner && (
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px', borderRadius: 14,
          background: `color-mix(in srgb, ${accent} 16%, var(--surface-2))`,
          border: `1px solid color-mix(in srgb, ${accent} 28%, var(--border-subtle))`,
          color: accent, fontSize: 13, fontWeight: 700, alignSelf: 'flex-start',
        }}>
          {f.owner}
        </div>
      )}
    </FocusShell>
  )
}

function CountdownView(f: Extract<FocusKind, { kind: 'countdown' }>) {
  const accent = f.days <= 3 ? 'var(--data-hot)' : f.days <= 7 ? 'var(--data-warm)' : 'var(--data-violet)'
  const word =
    f.days === 0 ? 'сегодня' :
    f.days === 1 ? 'завтра' :
    f.days < 5 ? `${f.days} дня` : `${f.days} дней`
  return (
    <FocusShell
      accent={accent}
      eyebrow={<>
        <Sparkles size={16} color={accent} strokeWidth={2} />
        <Eyebrow>До события</Eyebrow>
      </>}
    >
      <div className="num-display" style={{
        fontSize: f.days === 0 ? 56 : 96,
        color: 'var(--text-primary)', marginBottom: 12,
      }}>
        {f.days === 0 ? 'сегодня' : f.days}
        {f.days > 0 && <span style={{ fontSize: 24, fontWeight: 600, color: 'var(--text-secondary)', marginLeft: 10, letterSpacing: 0 }}>
          {f.days < 5 ? 'дня' : 'дней'}
        </span>}
      </div>
      <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)' }}>
        {f.label}
      </div>
    </FocusShell>
  )
}

function BillDue(f: Extract<FocusKind, { kind: 'bill-due' }>) {
  const accent = 'var(--data-danger)'
  const word = f.daysLeft === 0 ? 'сегодня' : f.daysLeft === 1 ? 'завтра' : `через ${f.daysLeft}д`
  return (
    <FocusShell
      accent={accent}
      eyebrow={<>
        <Receipt size={16} color={accent} strokeWidth={2} />
        <Eyebrow>К оплате {word}</Eyebrow>
      </>}
    >
      <div className="num-display" style={{
        fontSize: 72, color: accent, marginBottom: 8, letterSpacing: '-0.03em',
      }}>
        {f.amount}
      </div>
      <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)' }}>
        {f.title}
      </div>
    </FocusShell>
  )
}

function NightView() {
  const accent = 'var(--data-violet)'
  return (
    <FocusShell
      accent={accent}
      eyebrow={<>
        <Moon size={16} color={accent} strokeWidth={2} />
        <Eyebrow>Тихое время</Eyebrow>
      </>}
    >
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', flex: 1, gap: 8 }}>
        <div style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-primary)', letterSpacing: '-0.5px' }}>
          Спокойной ночи
        </div>
        <div style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
          Дом в режиме ожидания. Касание — разблокировать.
        </div>
      </div>
    </FocusShell>
  )
}

function QuietView({ greeting, weather }: { greeting: string; weather: FocusWeather | null }) {
  const accent = 'var(--accent)'
  const [now, setNow] = useState(() => new Date())
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 30_000)
    return () => clearInterval(t)
  }, [])
  return (
    <FocusShell
      accent={accent}
      eyebrow={<>
        <Sun size={16} color={accent} strokeWidth={2} />
        <Eyebrow>{now.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })}</Eyebrow>
      </>}
    >
      <div style={{ fontSize: 32, fontWeight: 800, color: 'var(--text-primary)', letterSpacing: '-0.5px', marginBottom: 12 }}>
        {greeting}
      </div>
      {weather && (
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <div className="num-display" style={{ fontSize: 56, color: 'var(--text-primary)' }}>
            {weather.temp}°
          </div>
          <div style={{ fontSize: 15, color: 'var(--text-secondary)', fontWeight: 500 }}>
            {weather.desc}
          </div>
        </div>
      )}
    </FocusShell>
  )
}

// ——————————————————————————————
// Root
// ——————————————————————————————

export default function FocusCard(props: Props) {
  const [hour, setHour] = useState(() => new Date().getHours())
  useEffect(() => {
    const t = setInterval(() => setHour(new Date().getHours()), 60_000)
    return () => clearInterval(t)
  }, [])

  const focus = useMemo(() => pickFocus(props, hour), [props, hour])

  const key = focus.kind + (
    focus.kind === 'morning-outfit' ? focus.advice :
    focus.kind === 'tram-imminent' ? `${focus.route}-${focus.minutes}` :
    focus.kind === 'event-upcoming' ? focus.title :
    focus.kind === 'countdown' ? focus.label :
    focus.kind === 'bill-due' ? focus.title :
    focus.kind === 'quiet' ? focus.greeting : ''
  )

  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={key}
        initial={{ opacity: 0, y: 8 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -8 }}
        transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}
        style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
      >
        {focus.kind === 'morning-outfit' && <MorningOutfit {...focus} />}
        {focus.kind === 'tram-imminent' && <TramImminent {...focus} />}
        {focus.kind === 'event-upcoming' && <EventUpcoming {...focus} />}
        {focus.kind === 'countdown' && <CountdownView {...focus} />}
        {focus.kind === 'bill-due' && <BillDue {...focus} />}
        {focus.kind === 'night' && <NightView />}
        {focus.kind === 'quiet' && <QuietView greeting={focus.greeting} weather={props.weather} />}
      </motion.div>
    </AnimatePresence>
  )
}