import { useTranslation } from 'react-i18next';
import { Card, CardContent, CardHeader, CardTitle } from '@shared/components/ui/card';
import { Badge } from '@shared/components/ui/badge';
import { PageContainer, PageHeader } from '@shared/components/layout';
import { getStatusIntent } from '@shared/constants/statusIntent';
import { Settings, Server, Shield, Database } from 'lucide-react';

/*
 * 시스템 관리 — 서버 상태, 디스크, 보안 설정 등 인프라 관리
 */

const SERVER_STATUS = [
  { name: 'WAS-01 (운영)', cpu: 42, mem: 65, disk: 38, status: '정상' },
  { name: 'WAS-02 (이중화)', cpu: 18, mem: 32, disk: 38, status: '정상' },
  { name: 'DB-01 (PostgreSQL)', cpu: 55, mem: 72, disk: 61, status: '정상' },
  { name: 'DB-02 (TimescaleDB)', cpu: 48, mem: 68, disk: 55, status: '정상' },
  { name: 'AI-Engine-01', cpu: 78, mem: 85, disk: 42, status: '주의' },
  { name: 'File-NAS', cpu: 5, mem: 12, disk: 82, status: '경고' },
];

function UsageBar({ value }: { value: number }) {
  const color = value > 80 ? 'bg-red-500' : value > 60 ? 'bg-yellow-500' : 'bg-green-500';
  return (
    <div className="flex items-center gap-1.5">
      <div className="w-16 h-1.5 bg-switch-background/60 rounded-full overflow-hidden">
        <div className={`h-full rounded-full ${color}`} style={{ width: `${value}%` }} />
      </div>
      <span className="text-[9px] text-muted-foreground w-8 text-right">{value}%</span>
    </div>
  );
}

export function AdminPanel() {
  const { t } = useTranslation('admin');
  return (
    <PageContainer>
      <PageHeader
        icon={Settings}
        title={t('adminPanel.title')}
        description={t('adminPanel.desc')}
        demo
      />

      {/* 서버 상태 */}
      <div className="grid grid-cols-3 gap-3">
        {SERVER_STATUS.map((s) => (
          <Card key={s.name} className="bg-surface-raised border-border">
            <CardContent className="p-4">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <Server className="w-4 h-4 text-hint" />
                  <span className="text-[11px] font-bold text-heading">{s.name}</span>
                </div>
                <Badge intent={getStatusIntent(s.status)} size="xs">{s.status}</Badge>
              </div>
              <div className="space-y-1.5">
                <div className="flex items-center justify-between"><span className="text-[9px] text-hint">CPU</span><UsageBar value={s.cpu} /></div>
                <div className="flex items-center justify-between"><span className="text-[9px] text-hint">MEM</span><UsageBar value={s.mem} /></div>
                <div className="flex items-center justify-between"><span className="text-[9px] text-hint">DISK</span><UsageBar value={s.disk} /></div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 시스템 정보 */}
      <div className="grid grid-cols-2 gap-3">
        <Card>
          <CardHeader className="px-4 pt-3 pb-2">
            <CardTitle className="text-xs text-label flex items-center gap-1.5"><Database className="w-3.5 h-3.5 text-blue-400" />데이터베이스</CardTitle>
          </CardHeader>
          <CardContent className="px-4 pb-4 space-y-2">
            {[['PostgreSQL', 'v15.4 운영중'], ['TimescaleDB', 'v2.12 운영중'], ['Redis 캐시', 'v7.2 운영중'], ['Kafka', 'v3.6 클러스터 3노드']].map(([k, v]) => (
              <div key={k} className="flex justify-between text-[11px]"><span className="text-hint">{k}</span><span className="text-label">{v}</span></div>
            ))}
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="px-4 pt-3 pb-2">
            <CardTitle className="text-xs text-label flex items-center gap-1.5"><Shield className="w-3.5 h-3.5 text-green-400" />보안 현황</CardTitle>
          </CardHeader>
          <CardContent className="px-4 pb-4 space-y-2">
            {[['SSL 인증서', '2027-03-15 만료'], ['방화벽', '정상 동작'], ['IDS/IPS', '실시간 감시중'], ['백업', '금일 03:00 완료']].map(([k, v]) => (
              <div key={k} className="flex justify-between text-[11px]"><span className="text-hint">{k}</span><span className="text-label">{v}</span></div>
            ))}
          </CardContent>
        </Card>
      </div>
    </PageContainer>
  );
}