hanarang-dashboard/frontend/components/dashboard/SisterCard.tsx

'use client';

import React from 'react';
import styled from 'styled-components';
import StatusBadge from '../common/StatusBadge';
import { theme } from '@/styles/theme';

type Status = 'online' | 'offline' | 'working' | 'unknown';

interface SisterCardProps {
  name: string;
  role: string;
  status: Status;
  lastSeen: string | null;
  currentTask: string | null;
}

const statusBorderColors: Record<Status, string> = {
  online: theme.colors.online,
  offline: theme.colors.offline,
  working: theme.colors.working,
  unknown: theme.colors.textSecondary,
};

const sisterEmojis: Record<string, string> = {
  harang: '🦊',
  narang: '🦊',
  darang: '🐱',
  erang: '🐺',
};

const sisterDisplayNames: Record<string, string> = {
  harang: '하랑이',
  narang: '나랑이',
  darang: '다랑이',
  erang: '이랑이',
};

const Card = styled.div<{ $status: Status }>`
  background: rgba(22, 27, 34, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(240, 246, 252, 0.1);
  border-left: 3px solid ${({ $status }) => statusBorderColors[$status]};
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
  flex: 1;
  min-width: 0;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }
`;

const CardHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
`;

const Emoji = styled.span`
  font-size: 24px;
  line-height: 1;
`;

const NameBlock = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2px;
`;

const Name = styled.span`
  font-size: 16px;
  font-weight: 600;
  color: #E6EDF3;
`;

const Role = styled.span`
  font-size: 12px;
  color: #8B949E;
`;

const StatusRow = styled.div`
  margin-bottom: 10px;
`;

const MetaRow = styled.div`
  font-size: 12px;
  color: #8B949E;
  margin-top: 6px;
`;

const CurrentTask = styled.div`
  font-size: 12px;
  color: #58A6FF;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(88, 166, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

const IpBadge = styled.span`
  font-size: 11px;
  color: rgba(139, 148, 158, 0.6);
  font-family: monospace;
`;

function formatLastSeen(lastSeen: string | null): string {
  if (!lastSeen) return '기록 없음';
  const date = new Date(lastSeen);
  const diff = Date.now() - date.getTime();
  const min = Math.floor(diff / 60000);
  if (min < 1) return '방금 전';
  if (min < 60) return `${min}분 전`;
  const hr = Math.floor(min / 60);
  if (hr < 24) return `${hr}시간 전`;
  return `${Math.floor(hr / 24)}일 전`;
}

export default function SisterCard({
  name,
  role,
  status,
  lastSeen,
  currentTask,
}: SisterCardProps) {
  return (
    <Card $status={status}>
      <CardHeader>
        <Emoji>{sisterEmojis[name] ?? '🤖'}</Emoji>
        <NameBlock>
          <Name>{sisterDisplayNames[name] ?? name}</Name>
          <Role>{role}</Role>
        </NameBlock>
      </CardHeader>
      <StatusRow>
        <StatusBadge status={status} />
      </StatusRow>
      <MetaRow>
        마지막 활동: {formatLastSeen(lastSeen)}
      </MetaRow>
      {currentTask && <CurrentTask>📌 {currentTask}</CurrentTask>}
    </Card>
  );
}