import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Badge } from '@shared/components/ui/badge';
import { PageContainer, PageHeader } from '@shared/components/layout';
import { DataTable, type DataColumn } from '@shared/components/common/DataTable';
import { Monitor } from 'lucide-react';
import { getDeviceStatusIntent, getDeviceStatusLabel } from '@shared/constants/deviceStatuses';
import { useSettingsStore } from '@stores/settingsStore';

/* SFR-16: 함정용 단말에서 이용가능한 Agent 개발 */

interface Agent { id: string; ship: string; version: string; status: string; sync: string; lastSync: string; tasks: number; [key: string]: unknown; }
const DATA: Agent[] = [
  { id: 'AGT-101', ship: '3001함', version: 'v1.2.0', status: '온라인', sync: '동기화 완료', lastSync: '09:20:05', tasks: 3 },
  { id: 'AGT-102', ship: '3005함', version: 'v1.2.0', status: '온라인', sync: '동기화 완료', lastSync: '09:20:03', tasks: 2 },
  { id: 'AGT-103', ship: '3009함', version: 'v1.1.8', status: '온라인', sync: '동기화 중', lastSync: '09:15:22', tasks: 1 },
  { id: 'AGT-104', ship: '5001함', version: 'v1.2.0', status: '오프라인', sync: '미동기화', lastSync: '08:45:00', tasks: 0 },
  { id: 'AGT-105', ship: '서특단 1정', version: 'v1.2.0', status: '온라인', sync: '동기화 완료', lastSync: '09:19:55', tasks: 2 },
  { id: 'AGT-106', ship: '1503함', version: '-', status: '미배포', sync: '-', lastSync: '-', tasks: 0 },
];

export function ShipAgent() {
  const { t } = useTranslation('fieldOps');
  const { t: tc } = useTranslation('common');
  const lang = useSettingsStore((s) => s.language);

  const cols: DataColumn<Agent>[] = useMemo(() => [
    { key: 'id', label: 'Agent ID', width: '80px', render: v => <span className="text-hint font-mono text-[10px]">{v as string}</span> },
    { key: 'ship', label: '함정', sortable: true, render: v => <span className="text-cyan-400 font-medium">{v as string}</span> },
    { key: 'version', label: '버전', width: '70px' },
    { key: 'status', label: '상태', width: '70px', align: 'center', sortable: true,
      render: v => {
        const s = v as string;
        return (
          <Badge intent={getDeviceStatusIntent(s)} size="sm">
            {getDeviceStatusLabel(s, tc, lang)}
          </Badge>
        );
      },
    },
    { key: 'sync', label: '동기화', width: '90px', render: v => <span className="text-muted-foreground text-[10px]">{v as string}</span> },
    { key: 'lastSync', label: '최종 동기화', width: '90px', render: v => <span className="text-hint font-mono text-[10px]">{v as string}</span> },
    { key: 'tasks', label: '작업 수', width: '60px', align: 'right', render: v => <span className="text-heading font-bold">{v as number}</span> },
  ], [tc, lang]);

  return (
    <PageContainer>
      <PageHeader
        icon={Monitor}
        iconColor="text-cyan-400"
        title={t('shipAgent.title')}
        description={t('shipAgent.desc')}
        demo
      />
      <div className="flex gap-2">
        {[{ l: '전체 Agent', v: DATA.length, c: 'text-heading' }, { l: '온라인', v: DATA.filter(d => d.status === '온라인').length, c: 'text-green-400' }, { l: '오프라인', v: DATA.filter(d => d.status === '오프라인').length, c: 'text-red-400' }, { l: '미배포', v: DATA.filter(d => d.status === '미배포').length, c: 'text-muted-foreground' }].map(k => (
          <div key={k.l} className="flex-1 flex items-center gap-2 px-3 py-2 rounded-xl border border-border bg-card">
            <span className={`text-base font-bold ${k.c}`}>{k.v}</span><span className="text-[9px] text-hint">{k.l}</span>
          </div>
        ))}
      </div>
      <DataTable data={DATA} columns={cols} pageSize={10} searchPlaceholder="함정명, Agent ID 검색..." searchKeys={['ship', 'id']} exportFilename="함정Agent" />
    </PageContainer>
  );
}
