import React, { ReactNode } from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { PageHeader } from '@/shared/components/layout/PageHeader';
import { AdminListToolbar } from '@/shared/components/ui';
import { ROUTES } from '@/shared/constants/routes';

const BackLink = styled(Link)`
  display: inline-flex;
  align-items: center;
  gap: ${({ theme }) => theme.spacing[2]};
  margin-bottom: ${({ theme }) => theme.spacing[4]};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
  color: ${({ theme }) => theme.colors.text.secondary};
  text-decoration: none;
  transition: color ${({ theme }) => theme.transitions.fast};

  &:hover {
    color: ${({ theme }) => theme.colors.primary};
  }
`;

export interface AdminPageShellProps {
  title: string;
  subtitle?: string;
  backTo?: string;
  backLabel: string;
  toolbar?: ReactNode;
  children: ReactNode;
}

export const AdminPageShell: React.FC<AdminPageShellProps> = ({
  title,
  subtitle,
  backTo = ROUTES.SETTINGS,
  backLabel,
  toolbar,
  children,
}) => (
  <>
    <BackLink to={backTo}>← {backLabel}</BackLink>
    <PageHeader title={title} subtitle={subtitle} />
    {toolbar ? <AdminListToolbar>{toolbar}</AdminListToolbar> : null}
    {children}
  </>
);