'use client';

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import StatusBadge from '@/components/common/StatusBadge';
import ConfirmModal from '@/components/admin/ConfirmModal';
import { API_URL } from '@/lib/config';
import { adminFetch } from '@/lib/adminFetch';
import { SISTER_DISPLAY_NAMES } from '@/lib/sisters';
import SisterAvatar from '@/components/common/SisterAvatar';

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

interface ActionResult {
  success: boolean;
  output: string;
  error: string | null;
}

interface SisterAdminItem {
  id?: number;
  name: string;
  status: Status;
}

const Table = styled.div`display:flex;flex-direction:column;gap:8px;user-select:none;`;
const Row = styled.div`background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;padding:16px 20px;display:flex;align-items:center;gap:16px;`;
const SisterInfo = styled.div`display:flex;align-items:center;gap:10px;flex:1;`;
const Name = styled.span`font-size:15px;font-weight:600;color:var(--text-primary);min-width:70px;`;
const Actions = styled.div`display:flex;gap:8px;`;
const ActionBtn = styled.button<{ $danger?: boolean }>`padding:6px 14px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid;transition:all .15s;user-select:none;${({ $danger }) => $danger ? `background: rgba(255,23,68,0.08); border-color: rgba(255,23,68,0.3); color: #FF1744; &:hover { background: rgba(255,23,68,0.18); }` : `background: rgba(88,166,255,0.08); border-color: rgba(88,166,255,0.3); color: #58A6FF; &:hover { background: rgba(88,166,255,0.18); }`}`;
const ResultBanner = styled.div<{ $success: boolean }>`margin-top:8px;padding:8px 12px;background:${({ $success }) => $success ? 'rgba(0,230,118,0.08)' : 'rgba(255,23,68,0.08)'};border:1px solid ${({ $success }) => $success ? 'rgba(0,230,118,0.3)' : 'rgba(255,23,68,0.3)'};border-radius:6px;font-size:12px;color:${({ $success }) => $success ? '#00FF00' : '#FF1744'};font-family:monospace;white-space:pre-wrap;`;

export default function AdminSistersPage() {
  const [sisters, setSisters] = useState<SisterAdminItem[]>([]);
  const [modal, setModal] = useState<{ action: 'restart' | 'reset'; name: string } | null>(null);
  const [results, setResults] = useState<Record<string, ActionResult>>({});
  const [loading, setLoading] = useState<Record<string, boolean>>({});

  useEffect(() => {
    fetch(`${API_URL}/api/sisters`).then((r) => r.json()).then(setSisters).catch(() => {});
    const iv = setInterval(() => { fetch(`${API_URL}/api/sisters`).then((r) => r.json()).then(setSisters).catch(() => {}); }, 15000);
    return () => clearInterval(iv);
  }, []);

  const doAction = async (action: 'restart' | 'reset', name: string) => {
    setModal(null);
    setLoading((p) => ({ ...p, [`${action}:${name}`]: true }));
    try {
      const res = await adminFetch(`/api/admin/sisters/${name}/${action}`, { method: 'POST' });
      const data: ActionResult = await res.json();
      setResults((p) => ({ ...p, [`${action}:${name}`]: data }));
    } catch (e) {
      setResults((p) => ({ ...p, [`${action}:${name}`]: { success: false, output: '', error: (e as Error).message } }));
    } finally {
      setLoading((p) => ({ ...p, [`${action}:${name}`]: false }));
    }
  };

  return (
    <>
      <Table>
        {sisters.map((s) => {
          const restartResult = results[`restart:${s.name}`];
          const resetResult = results[`reset:${s.name}`];
          return (
            <div key={s.id}>
              <Row>
                <SisterInfo>
                  <SisterAvatar name={s.name} size={28} />
                  <Name>{SISTER_DISPLAY_NAMES[s.name] ?? s.name}</Name>
                  <StatusBadge status={s.status as Status} />
                </SisterInfo>
                <Actions>
                  <ActionBtn onClick={() => setModal({ action: 'restart', name: s.name })} disabled={loading[`restart:${s.name}`]}>{loading[`restart:${s.name}`] ? '...' : '재시작'}</ActionBtn>
                  <ActionBtn $danger onClick={() => setModal({ action: 'reset', name: s.name })} disabled={loading[`reset:${s.name}`]}>{loading[`reset:${s.name}`] ? '...' : '리셋'}</ActionBtn>
                </Actions>
              </Row>
              {restartResult && <ResultBanner $success={restartResult.success}>재시작: {restartResult.success ? '✅ 성공' : `❌ ${restartResult.error}`}{restartResult.output && `\n${restartResult.output}`}</ResultBanner>}
              {resetResult && <ResultBanner $success={resetResult.success}>리셋: {resetResult.success ? '✅ 성공' : `❌ ${resetResult.error}`}</ResultBanner>}
            </div>
          );
        })}
      </Table>

      {modal && <ConfirmModal title={modal.action === 'restart' ? '게이트웨이 재시작' : '세션 리셋'} message={`${SISTER_DISPLAY_NAMES[modal.name] ?? modal.name}의 ${modal.action === 'restart' ? 'OpenClaw Gateway를 재시작' : '메인 세션을 초기화'}하시겠어요?`} confirmLabel={modal.action === 'restart' ? '재시작' : '리셋'} danger={modal.action === 'reset'} onConfirm={() => doAction(modal.action, modal.name)} onCancel={() => setModal(null)} />}
    </>
  );
}