hanarang-dashboard/frontend/app/sisters/page.tsx

'use client';

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import Link from 'next/link';
import StatusBadge from '@/components/common/StatusBadge';
import { theme } from '@/styles/theme';
import { API_URL } from '@/lib/config';

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

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

const Page = styled.div`
  padding: 32px;
  min-height: 100vh;
  background: ${theme.colors.bg};
`;

const PageTitle = styled.h1`
  font-size: 22px;
  font-weight: 700;
  color: ${theme.colors.textPrimary};
  margin-bottom: 6px;
`;

const PageSubtitle = styled.p`
  font-size: 14px;
  color: ${theme.colors.textSecondary};
  margin-bottom: 28px;
`;

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
`;

const Card = styled(Link)`
  display: block;
  background: ${theme.colors.cardBg};
  border: 1px solid ${theme.colors.border};
  border-radius: 14px;
  padding: 24px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  text-decoration: none;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.4);
    border-color: rgba(88,166,255,0.3);
  }
`;

const CardTop = styled.div`
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
`;

const Avatar = styled.div`
  font-size: 36px;
  line-height: 1;
`;

const NameBlock = styled.div``;

const Name = styled.div`
  font-size: 18px;
  font-weight: 700;
  color: ${theme.colors.textPrimary};
  margin-bottom: 4px;
`;

const Role = styled.div`
  font-size: 12px;
  color: ${theme.colors.textSecondary};
`;

const Divider = styled.div`
  height: 1px;
  background: ${theme.colors.border};
  margin: 12px 0;
`;

const MetaItem = styled.div`
  font-size: 12px;
  color: ${theme.colors.textSecondary};
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
`;

const TaskBox = styled.div`
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(88,166,255,0.06);
  border: 1px solid rgba(88,166,255,0.15);
  border-radius: 6px;
  font-size: 12px;
  color: ${theme.colors.accent};
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

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

export default function SistersListPage() {
  const [sisters, setSisters] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const load = async () => {
      try {
        const res = await fetch(`${API_URL}/api/sisters`);
        if (res.ok) setSisters(await res.json());
      } catch {
        // silent
      } finally {
        setLoading(false);
      }
    };
    load();
    const interval = setInterval(load, 30000);
    return () => clearInterval(interval);
  }, []);

  return (
    <Page>
      <PageTitle>자매</PageTitle>
      <PageSubtitle>하나랑 4자매 멀티에이전트 현황. 카드 클릭으로 상세 보기.</PageSubtitle>

      {loading ? (
        <div style={{ color: theme.colors.textSecondary, fontSize: '14px' }}>로딩 중...</div>
      ) : (
        <Grid>
          {sisters.map((s) => (
            <Card key={s.id} href={`/sisters/${s.name}`}>
              <CardTop>
                <Avatar>{sisterEmojis[s.name] ?? '🤖'}</Avatar>
                <NameBlock>
                  <Name>{sisterDisplayNames[s.name] ?? s.name}</Name>
                  <Role>{s.role}</Role>
                </NameBlock>
              </CardTop>
              <StatusBadge status={s.status} />
              <Divider />
              <MetaItem>🕐 마지막 활동: {formatLastSeen(s.lastSeen)}</MetaItem>
              <MetaItem>🖥️ LXC {s.lxcId}</MetaItem>
              {s.currentTask && <TaskBox>📌 {s.currentTask}</TaskBox>}
            </Card>
          ))}
        </Grid>
      )}
    </Page>
  );
}