import React, {useState} from 'react';
import styled, { css } from 'styled-components';
import { DeviceUser } from "../../../store/useDeviceStore";
import {buttonNames} from "../../../const/buttons/names";
import {ModalMap} from "../../modalwindows/windowsType";
import {IconComponent} from "../../../const/buttons/icons";
import {useModalContext} from "../../../store";

interface DeviceCardProps {
    device: DeviceUser;
    status: 'online' | 'offline';
}

const CardWrapper = styled.div<{ status: 'online' | 'offline' }>`
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 16px;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }
`;

const CardHeader = styled.div<{ status: 'online' | 'offline' }>`
    background: ${({ status, theme }) =>
            status === 'online' ? theme.successColor : theme.offlineColor};
    color: white;
    padding: 16px;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
`;


const CardContent = styled.div<{ isExpanded: boolean }>`
  max-height: 0;
  opacity: 0;
  padding: 0 16px;
  transition: all 0.3s ease;
  color: #333;
  font-size: 14px;
  display: grid;
  gap: 12px;

  ${({ isExpanded }) => isExpanded && css`
    max-height: 500px;
    opacity: 1;
    padding: 16px;
  `}
`;

const InfoRow = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const Label = styled.span`
  font-weight: 500;
  color: #666;
`;

const Value = styled.span`
  color: #333;
`;


const DeviceCard: React.FC<DeviceCardProps> = ({ device, status }) => {
    const [isExpanded, setIsExpanded] = useState(false);
    const toggleExpanded = () => setIsExpanded(!isExpanded);
    const { openModal } = useModalContext();

    const openModalNote = (e: React.MouseEvent) => {
        e.stopPropagation();
        openModal(ModalMap['6'], {
            address: device.mac,
            currentNote: device.note || ''
        });
    };


    return (
        <CardWrapper status={status} onClick={toggleExpanded}>
            <CardHeader status={status}>
                <p>
                    MAC: {device.mac}
                </p>
                <span onClick={openModalNote}>
                    <IconComponent name={buttonNames[16]} width="28" height="28" setColor={'white'} />
                </span>
            </CardHeader>

            <CardContent isExpanded={isExpanded}>
                <InfoRow>
                    <Label>Имя:</Label>
                    <Value>{device.hostname || 'Неизвестно'}</Value>
                </InfoRow>

                <InfoRow>
                    <Label>Производитель:</Label>
                    <Value>{device.vendor || 'Неизвестно'}</Value>
                </InfoRow>

                <InfoRow>
                    <Label>IP адрес:</Label>
                    <Value>{device.ip}</Value>
                </InfoRow>

                {device.open_ports?.length > 0 && (
                    <InfoRow>
                        <Label>Открытые порты:</Label>
                        <Value>{device.open_ports.join(', ')}</Value>
                    </InfoRow>
                )}

                <InfoRow>
                    <Label>Последняя активность:</Label>
                    <Value>{device.last_seen}</Value>
                </InfoRow>

                <InfoRow>
                    <Label>Заметка:</Label>
                    <Value>{device.note || '-'}</Value>
                </InfoRow>
            </CardContent>
        </CardWrapper>
    );
};

export default DeviceCard;