'use client'

import { useState } from 'react'

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

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

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

    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 {
        // revert on error
        setIsOn(!next)
      } finally {
        setLoading(false)
      }
    }
  }

  return (
    <div
      style={{
        background: isOn ? 'rgba(0,212,255,0.06)' : 'var(--card-bg)',
        border: isOn ? '1px solid rgba(0,212,255,0.2)' : '1px solid var(--card-border)',
        borderRadius: 18,
        padding: '16px',
        minHeight: 140,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        transition: 'all 0.25s ease',
      }}
    >
      {/* Top row: icon + toggle */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div
          style={{
            width: 44,
            height: 44,
            borderRadius: 12,
            background: isOn ? 'rgba(0,212,255,0.15)' : 'rgba(255,255,255,0.06)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: 22,
            transition: 'all 0.25s ease',
          }}
        >
          {icon}
        </div>

        {/* Toggle button */}
        <button
          onClick={toggle}
          disabled={loading}
          style={{
            width: 50,
            height: 28,
            borderRadius: 14,
            background: isOn
              ? 'linear-gradient(90deg, #00b4d8, #00d4ff)'
              : 'rgba(255,255,255,0.1)',
            position: 'relative',
            transition: 'background 0.3s ease',
            flexShrink: 0,
            touchAction: 'manipulation',
            WebkitTapHighlightColor: 'transparent',
            opacity: loading ? 0.6 : 1,
          }}
        >
          <span
            style={{
              position: 'absolute',
              top: 3,
              left: isOn ? 25 : 3,
              width: 22,
              height: 22,
              borderRadius: '50%',
              background: '#fff',
              boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
              transition: 'left 0.25s ease',
            }}
          />
        </button>
      </div>

      {/* Bottom: name + status */}
      <div>
        <div
          style={{
            fontSize: 14,
            fontWeight: 600,
            color: 'var(--text-primary)',
            marginBottom: 3,
            lineHeight: 1.2,
          }}
        >
          {name}
        </div>
        <div style={{ fontSize: 12, color: isOn ? 'var(--accent)' : 'var(--text-secondary)' }}>
          {isOn ? 'Включён' : 'Выключен'}
          {extraInfo && isOn ? ` · ${extraInfo}` : ''}
        </div>
      </div>
    </div>
  )
}
