'use client';

import React from 'react';
import styled from 'styled-components';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

const ADMIN_TABS = [
  { href: '/admin', 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); }
`;

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  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>
      {children}
    </Wrapper>
  );
}