smart-home-tablet/components/DeviceCard.tsx

'use client'

import { useState, useEffect } from 'react'
import { Fan, Lightbulb, Tv, Snowflake, Power } from 'lucide-react'

interface DeviceCardProps {
  id: string
  name: string
  icon: string
  entityId?: string
  domain?: string
  initialState: boolean
  isMock?: boolean
  extraInfo?: string
}

function getDeviceIcon(id: string, isOn: boolean) {
  const color = isOn ? '#a5b4fc' : 'rgba(255,255,255,0.35)'
  const size = 24
  if (id.includes('air_purifier')) return <Fan size={size} color={color} />
  if (id.includes('light')) return <Lightbulb size={size} color={isOn ? '#fbbf24' : color} />
  if (id.includes('tv')) return <Tv size={size} color={color} />
  if (id.includes('ac')) return <Snowflake size={size} color={isOn ? '#22d3ee' : color} />
  return <Power size={size} color={color} />
}

function getDeviceGradient(id: string): string {
  if (id.includes('air_purifier')) return 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.12))'
  if (id.includes('light')) return 'linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.1))'
  if (id.includes('tv')) return 'linear-gradient(135deg, rgba(59,130,246,0.18), rgba(99,102,241,0.1))'
  if (id.includes('ac')) return 'linear-gradient(135deg, rgba(34,211,238,0.18), rgba(6,182,212,0.1))'
  return 'linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.08))'
}

function getDeviceBorder(id: string): string {
  if (id.includes('air_purifier')) return 'rgba(129,140,248,0.25)'
  if (id.includes('light')) return 'rgba(251,191,36,0.25)'
  if (id.includes('tv')) return 'rgba(99,102,241,0.25)'
  if (id.includes('ac')) return 'rgba(34,211,238,0.25)'
  return 'rgba(129,140,248,0.2)'
}

export default function DeviceCard({
  id, name, icon, entityId, domain, initialState, isMock = false, extraInfo,
}: DeviceCardProps) {
  const [isOn, setIsOn] = useState(initialState)
  const [synced, setSynced] = useState(false)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    if (!synced && !isMock) {
      setIsOn(initialState)
      setSynced(true)
    }
  }, [initialState, isMock, synced])

  const toggle = async () => {
    const next = !isOn
    setIsOn(next)

    if (!isMock && entityId && domain) {
      setLoading(true)
      try {
        await fetch('/api/ha', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            domain,
            service: next ? 'turn_on' : 'turn_off',
            entity_id: entityId,
          }),
        })
      } catch {
        setIsOn(!next)
      } finally {
        setLoading(false)
      }
    }
  }

  return (
    <div style={{
      background: isOn ? getDeviceGradient(id) : 'rgba(255,255,255,0.03)',
      backdropFilter: 'blur(20px)',
      WebkitBackdropFilter: 'blur(20px)',
      border: isOn ? `1px solid ${getDeviceBorder(id)}` : '1px solid rgba(255,255,255,0.06)',
      borderRadius: 22,
      padding: '20px 18px 18px',
      minHeight: 150,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      transition: 'all 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
      boxShadow: isOn ? '0 8px 32px rgba(99,102,241,0.1)' : '0 2px 8px rgba(0,0,0,0.1)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Subtle glow effect when on */}
      {isOn && (
        <div style={{
          position: 'absolute',
          top: -30,
          right: -30,
          width: 100,
          height: 100,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(129,140,248,0.15) 0%, transparent 70%)',
          pointerEvents: 'none',
        }} />
      )}

      {/* Top: icon + toggle */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', position: 'relative', zIndex: 1 }}>
        <div style={{
          width: 48, height: 48, borderRadius: 16,
          background: isOn ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.05)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'all 0.3s ease',
          boxShadow: isOn ? '0 4px 16px rgba(0,0,0,0.1)' : 'none',
        }}>
          {getDeviceIcon(id, isOn)}
        </div>

        <button
          onClick={toggle}
          disabled={loading}
          style={{
            width: 54, height: 30, borderRadius: 15,
            background: isOn
              ? 'linear-gradient(90deg, #6366f1, #8b5cf6)'
              : 'rgba(255,255,255,0.08)',
            position: 'relative', border: 'none', cursor: 'pointer',
            flexShrink: 0,
            transition: 'all 0.3s ease',
            opacity: loading ? 0.6 : 1,
            boxShadow: isOn ? '0 0 16px rgba(99,102,241,0.3)' : 'none',
          }}
        >
          <span style={{
            position: 'absolute', top: 4,
            left: isOn ? 28 : 4,
            width: 22, height: 22, borderRadius: '50%',
            background: '#fff',
            boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
            transition: 'left 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
            display: 'block',
          }} />
        </button>
      </div>

      {/* Bottom: name + status */}
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3 }}>
          {name}
        </div>
        <div style={{
          fontSize: 12,
          color: isOn ? '#a5b4fc' : 'var(--text-secondary)',
          marginTop: 4,
          fontWeight: 500,
        }}>
          {isOn ? 'Включён' : 'Выключен'}
          {extraInfo && isOn ? ` · ${extraInfo}` : ''}
        </div>
        {isMock && (
          <div style={{
            fontSize: 10,
            color: 'var(--text-tertiary)',
            marginTop: 2,
            fontStyle: 'italic',
          }}>demo</div>
        )}
      </div>
    </div>
  )
}