import {
  AlertCircle,
  Building2,
  Calendar as CalendarIcon,
  Droplets,
  Gauge,
  Settings,
  Thermometer,
} from 'lucide-react'
import { Button } from 'shared/ui/button'
import { Card, CardContent } from 'shared/ui/card'
import { VerificationConditionsConfig } from './types'

interface VerificationConditionsPreviewProps {
  config: VerificationConditionsConfig
  onChange?: (config: VerificationConditionsConfig) => void
}

const ConditionSkeleton = ({
  index,
  icon: Icon,
  name,
  unit,
}: {
  index: number
  icon: any
  name: string
  unit: string
}) => (
  <div className="flex items-center gap-2 rounded-md bg-muted/30 p-1.5 text-sm">
    <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary/10">
      <Icon className="h-2.5 w-2.5 text-primary" />
    </div>
    <div className="min-w-0 flex-1">
      <div className="font-medium text-foreground">{name}</div>
    </div>
    <div className="h-5 shrink-0 rounded bg-muted px-2 py-0.5 text-xs text-muted-foreground">
      — {unit}
    </div>
  </div>
)

// Моковые условия поверки
const mockConditions = [
  { name: 'Температура', unit: '°C', icon: Thermometer },
  { name: 'Влажность', unit: '%', icon: Droplets },
  { name: 'Давление', unit: 'кПа', icon: Gauge },
  { name: 'Освещенность', unit: 'лк', icon: AlertCircle },
  { name: 'Вибрация', unit: 'м/с²', icon: AlertCircle },
  { name: 'Магнитное поле', unit: 'А/м', icon: AlertCircle },
  { name: 'Электромагнитное поле', unit: 'В/м', icon: AlertCircle },
]

export function VerificationConditionsPreview({
  config,
  onChange,
}: VerificationConditionsPreviewProps) {
  const conditionsToShow = mockConditions.slice(0, 7)
  const selectedDate =
    config.selectedDate || new Date().toISOString().split('T')[0]

  if (!config.selectedLaboratoryId) {
    return (
      <Card className="border-dashed">
        <CardContent className="p-3">
          <div className="text-center text-muted-foreground">
            <Building2 className="mx-auto mb-1 h-4 w-4 opacity-50" />
            <p className="text-xs">Лаборатория не выбрана</p>
          </div>
        </CardContent>
      </Card>
    )
  }

  return (
    <div className="space-y-2">
      <div className="space-y-2">
        {/* Информация о лаборатории и дате */}
        <div className="flex items-center gap-2 rounded-md bg-muted/20 p-2 text-sm">
          <Building2 className="h-3.5 w-3.5 text-muted-foreground" />
          <span className="font-medium text-muted-foreground">Лаборатория</span>
          <div className="ml-auto flex items-center gap-1 text-xs text-muted-foreground">
            <CalendarIcon className="h-3 w-3" />
            <span>{new Date(selectedDate).toLocaleDateString('ru-RU')}</span>
          </div>
        </div>

        {/* Общий статус с кнопкой настроить */}
        <div className="flex items-center justify-between px-2 text-xs">
          <div className="flex items-center gap-1.5 text-orange-600">
            <AlertCircle className="h-3.5 w-3.5" />
            <span className="font-medium">Данные не внесены</span>
          </div>

          <Button
            variant="outline"
            size="sm"
            disabled
            className="h-6 px-2 text-xs"
          >
            <Settings className="mr-1 h-3 w-3" />
            Настроить
          </Button>
        </div>

        {/* Моковые условия */}
        <div className="space-y-1">
          {conditionsToShow.map((condition, index) => (
            <ConditionSkeleton
              key={index}
              index={index}
              icon={condition.icon}
              name={condition.name}
              unit={condition.unit}
            />
          ))}
        </div>
      </div>
    </div>
  )
}