import { FileText, Settings, Wrench } from 'lucide-react'
import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Template } from '../../type/template'
import { Button } from '../ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'

interface TemplateCardProps {
  template: Template
  onDelete: (template: Template) => void
  isSelected?: boolean
}

const TemplateCard: React.FC<TemplateCardProps> = ({
  template,
  onDelete,
  isSelected = false,
}) => {
  const navigate = useNavigate()

  // Шаблон считается готовым, когда есть хотя бы один элемент и загружена
  // Excel-таблица (что подтверждается наличием mergedCells).
  const isConfigured =
    template.elements.length > 0 && (template.mergedCells?.length ?? 0) > 0

  return (
    <Card className={isSelected ? 'border-2 border-blue-500' : ''}>
      <CardHeader className="pb-4">
        <CardTitle className="text-base font-medium">{template.name}</CardTitle>
      </CardHeader>
      <CardContent className="pt-0">
        {template.description && (
          <p className="mb-3 line-clamp-2 text-sm text-muted-foreground">
            {template.description}
          </p>
        )}
        <div className="mb-3 flex justify-between text-xs text-muted-foreground">
          <span>
            Создан: {new Date(template.createdAt).toLocaleDateString()}
          </span>
          <span>
            Обновлён: {new Date(template.updatedAt).toLocaleDateString()}
          </span>
        </div>
        <div className="flex items-center gap-2">
          <Button
            size="sm"
            className="flex-1"
            disabled={!isConfigured}
            onClick={() => navigate(`/templates/${template.id}/protocols`)}
          >
            <FileText className="mr-2 h-3 w-3" />
            {isConfigured ? 'Создать протокол' : 'Требует настройки'}
          </Button>
          <Button
            size="sm"
            variant="outline"
            className="h-8 w-8 p-0"
            onClick={() => navigate(`/templates/${template.id}/edit`)}
          >
            <Settings className="h-3 w-3" />
          </Button>
          <Button
            size="sm"
            variant="outline"
            className="h-8 w-8 p-0"
            onClick={() => navigate(`/templates/${template.id}/elements`)}
          >
            <Wrench className="h-3 w-3" />
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}

export default TemplateCard