'use client'
// src/components/projects/SensorPanel.tsx
// Input: sensor (Sensor), onClose?
// Output: panneau latéral droit avec mesures temps réel, chart, batterie, metadata
// Rationale: affiché à droite de la scène 3D lors du clic sur un capteur

import { useEffect, useState } from 'react'
import { BarChart2, Clock, History, Radio, Zap } from 'lucide-react'
import { Panel } from '@/components/ui/Panel'
import { Badge } from '@/components/ui/Badge'
import { StatusDot } from '@/components/ui/StatusDot'
import { RingMeter } from '@/components/charts/RingMeter'
import { LineChart } from '@/components/charts/LineChart'
import { Button } from '@/components/ui/Button'
import { CounterValue } from '@/components/ui/CounterValue'
import { generateAmplitudeEnvelope } from '@/lib/mock/measurements'
import { formatUnit, relativeTime } from '@/lib/utils'
import type { Sensor, SensorStatus } from '@/types'

// ── Mapping status → Badge variant ──────────────────────────────────────────
const statusVariant: Record<SensorStatus, 'success' | 'warning' | 'danger' | 'info'> = {
  online:      'success',
  warning:     'warning',
  offline:     'danger',
  calibrating: 'info',
}

const statusLabel: Record<SensorStatus, string> = {
  online:      'En ligne',
  warning:     'Alerte',
  offline:     'Hors ligne',
  calibrating: 'Étalonnage',
}

const kindLabel: Record<string, string> = {
  accelerometer: 'Accéléromètre',
  strain_gauge:  'Jauge de déformation',
  displacement:  'Déplacement',
  temperature:   'Température',
  tilt:          'Inclinomètre',
  crack_meter:   'Fissuromètre',
}

// Couleur pour la batterie
function batteryColor(pct: number): string {
  if (pct > 50) return '#34D399'
  if (pct > 20) return '#FBBF24'
  return '#F87171'
}

export interface SensorPanelProps {
  sensor: Sensor
  onClose?: (() => void) | null
}

export function SensorPanel({ sensor, onClose }: SensorPanelProps) {
  // Flash de couleur sur mise à jour valeur
  const [flash, setFlash] = useState(false)
  const [displayValue, setDisplayValue] = useState(sensor.lastValue)

  // Simule un tick "temps réel" toutes les 2-3s
  useEffect(() => {
    setDisplayValue(sensor.lastValue)
    const interval = setInterval(() => {
      // Variation légère pseudo-aléatoire autour de la valeur de base
      const jitter = (Math.random() - 0.5) * sensor.lastValue * 0.08
      setDisplayValue(sensor.lastValue + jitter)
      setFlash(true)
      setTimeout(() => setFlash(false), 200)
    }, 2500)
    return () => clearInterval(interval)
  }, [sensor.id, sensor.lastValue])

  // Génère série pour LineChart
  const series = [
    {
      ...generateAmplitudeEnvelope(sensor.id, sensor.kind, 1),
      name: kindLabel[sensor.kind] ?? sensor.kind,
      color: '#3DB8E8',
    },
  ]

  return (
    <Panel
      title={sensor.label}
      onClose={onClose ?? undefined}
      width="360px"
      animate
    >
      <div className="flex flex-col gap-4">
        {/* Status + Kind */}
        <div className="flex items-center gap-2 flex-wrap">
          <StatusDot status={sensor.status} />
          <Badge variant={statusVariant[sensor.status]}>
            {statusLabel[sensor.status]}
          </Badge>
          <Badge variant="neutral" icon={<Radio size={10} strokeWidth={1.5} />}>
            {kindLabel[sensor.kind] ?? sensor.kind}
          </Badge>
        </div>

        {/* Valeur actuelle — ticker temps réel */}
        <div
          className="rounded-md p-3 flex items-center justify-between"
          style={{
            background: '#111B28',
            border: '1px solid #1E2D3D',
            transition: 'background 0.2s',
            backgroundColor: flash ? '#0f2a3a' : '#111B28',
          }}
        >
          <div className="flex flex-col gap-0.5">
            <span className="text-label text-text-muted uppercase tracking-[0.05em]">
              Dernière valeur
            </span>
            <div className="flex items-baseline gap-1.5">
              <CounterValue
                value={displayValue}
                digits={sensor.kind === 'accelerometer' || sensor.kind === 'tilt' || sensor.kind === 'displacement' || sensor.kind === 'crack_meter' ? 3 : 1}
                className="text-mono-large text-text-primary"
              />
              <span className="text-body text-text-secondary">{sensor.unit}</span>
            </div>
          </div>
          <BarChart2 size={18} strokeWidth={1.5} className="text-accent opacity-60" />
        </div>

        {/* Batterie */}
        <div className="flex items-center gap-4">
          <RingMeter
            value={sensor.battery}
            max={100}
            label="batterie"
            color={batteryColor(sensor.battery)}
            size={56}
            strokeWidth={5}
          />
          <div className="flex flex-col gap-1">
            <span className="text-label text-text-muted uppercase tracking-[0.05em]">Batterie</span>
            <div className="flex items-center gap-1.5">
              <Zap size={12} strokeWidth={1.5} style={{ color: batteryColor(sensor.battery) }} />
              <span className="font-mono text-sm text-text-primary">{sensor.battery}%</span>
            </div>
            {sensor.battery < 20 && (
              <span className="text-caption text-status-danger">Remplacement requis</span>
            )}
          </div>
        </div>

        {/* Chart 7j historique */}
        <div className="flex flex-col gap-2">
          <span className="text-label text-text-muted uppercase tracking-[0.05em]">
            Historique 24h (enveloppe amplitude)
          </span>
          <LineChart
            series={series}
            height={120}
            showGrid
            showAxis={false}
          />
        </div>

        {/* Métadonnées */}
        <div
          className="rounded-md p-3 flex flex-col gap-2"
          style={{ background: '#111B28', border: '1px solid #1E2D3D' }}
        >
          <div className="flex items-center justify-between">
            <span className="text-label text-text-muted uppercase tracking-[0.05em]">Installé</span>
            <div className="flex items-center gap-1.5">
              <Clock size={11} strokeWidth={1.5} className="text-text-muted" />
              <span className="text-caption text-text-secondary font-mono">
                {relativeTime(sensor.installedAt)}
              </span>
            </div>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-label text-text-muted uppercase tracking-[0.05em]">ID capteur</span>
            <span className="text-caption text-text-muted font-mono">{sensor.id}</span>
          </div>
        </div>

        {/* CTA */}
        <Button
          variant="ghost"
          size="sm"
          iconLeft={<History size={13} strokeWidth={1.5} />}
          className="w-full"
        >
          Voir historique complet
        </Button>
      </div>
    </Panel>
  )
}