'use client';

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { LabelMeta, SectionTitle } from '@/components/ui/base';

const ADMIN_TABS = [
  { href: '/admin', label: '자매 관리' },
  { href: '/admin/harness', label: '하네스 편집' },
  { href: '/admin/logs', label: '로그 뷰어' },
  { href: '/admin/costs', label: '비용 모니터' },
  { href: '/admin/repos', label: '저장소' },
];

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
`;

const AdminHeader = styled.div`
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--space-md);
`;

const TabNav = styled.div`
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
`;

const TabLink = styled(Link)<{ $active: boolean }>`
  font-size: 13px;
  font-weight: 500;
  color: ${({ $active }) => $active ? 'var(--text-primary)' : 'var(--text-secondary)'};
  text-decoration: none;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid ${({ $active }) => $active ? 'var(--text-primary)' : 'transparent'};
  transition: color 0.15s, border-color 0.15s;

  &:hover { color: var(--text-primary); }
`;

const ApiKeyRow = styled.div`
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
`;

const ApiKeyInput = styled.input`
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
  flex: 1;
  max-width: 300px;
  padding: 2px 0;

  &:focus { border-bottom-color: var(--text-primary); }
`;

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const [apiKey, setApiKey] = useState('');

  useEffect(() => {
    setApiKey(localStorage.getItem('hanarang_admin_key') ?? '');
  }, []);

  const saveKey = (v: string) => {
    setApiKey(v);
    localStorage.setItem('hanarang_admin_key', v);
  };

  return (
    <Wrapper>
      <AdminHeader>
        <div style={{ fontSize: '28px', fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 'var(--space-md)' }}>
          관리자
        </div>
        <TabNav>
          {ADMIN_TABS.map((tab) => (
            <TabLink key={tab.href} href={tab.href} $active={pathname === tab.href}>
              {tab.label}
            </TabLink>
          ))}
        </TabNav>
      </AdminHeader>

      <ApiKeyRow>
        <span>KEY [</span>
        <ApiKeyInput
          type="password"
          placeholder="ADMIN_API_KEY"
          value={apiKey}
          onChange={(e) => saveKey(e.target.value)}
        />
        <span>]</span>
      </ApiKeyRow>

      {children}
    </Wrapper>
  );
}