import React from 'react';
import styled from 'styled-components';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Card } from '@/shared/components/ui';
import { localizedName } from '@/features/tickets/utils/ticketDisplay';
import type { DepartmentPortalMetadata } from '@/features/departmentPortal/types/departmentPortal.types';
import { useBrandingLogos } from '@/shared/hooks/useBrandingLogos';

const HeroCard = styled(Card)`
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    155deg,
    ${({ theme }) => theme.colors.primaryLight} 0%,
    ${({ theme }) => theme.colors.surfaceElevated} 55%
  );
  box-shadow: ${({ theme }) => theme.shadows.md};
`;

const Glow = styled.div`
  position: absolute;
  top: -40%;
  inset-inline-end: -20%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    ${({ theme }) => theme.colors.primary}22 0%,
    transparent 70%
  );
  pointer-events: none;
`;

const HeroBody = styled.div`
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing[6]};
  text-align: start;
`;

const BrandRow = styled.div`
  display: flex;
  align-items: center;
  gap: ${({ theme }) => theme.spacing[4]};
  flex-wrap: wrap;
`;

const CompanyLogo = styled.img`
  height: 52px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
`;

const AppLogo = styled.img`
  height: 44px;
  width: auto;
`;

const Badge = styled.span`
  display: inline-block;
  padding: ${({ theme }) => `${theme.spacing[1]} ${theme.spacing[4]}`};
  border-radius: ${({ theme }) => theme.borderRadius.full};
  background-color: ${({ theme }) => theme.colors.surface};
  border: 1px solid ${({ theme }) => theme.colors.borderSoft};
  color: ${({ theme }) => theme.colors.primary};
  font-size: ${({ theme }) => theme.typography.fontSize.xs};
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  box-shadow: ${({ theme }) => theme.shadows.xs};
`;

const Title = styled.h1`
  font-family: ${({ theme }) => theme.typography.fontFamily.headline};
  font-size: clamp(1.75rem, 4vw, ${({ theme }) => theme.typography.fontSize['3xl']});
  font-weight: ${({ theme }) => theme.typography.fontWeight.bold};
  color: ${({ theme }) => theme.colors.text.primary};
  margin: 0;
  line-height: ${({ theme }) => theme.typography.lineHeight.heading};
  letter-spacing: ${({ theme }) => theme.typography.letterSpacing.tight};
`;

const Description = styled.p`
  color: ${({ theme }) => theme.colors.text.secondary};
  margin: 0;
  line-height: ${({ theme }) => theme.typography.lineHeight.relaxed};
  font-size: ${({ theme }) => theme.typography.fontSize.base};
  max-width: 36rem;
`;

const CompanyLine = styled.p`
  color: ${({ theme }) => theme.colors.text.tertiary};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  margin: 0;
`;

interface DepartmentPortalHeroProps {
  portal: DepartmentPortalMetadata;
}

export const DepartmentPortalHero: React.FC<DepartmentPortalHeroProps> = ({ portal }) => {
  const { locale, t } = useLocale();
  const { landscape } = useBrandingLogos();
  const name = localizedName(
    { name_en: portal.name_en, name_ar: portal.name_ar },
    locale,
  );
  const description =
    locale === 'ar'
      ? portal.description_ar ?? portal.description_en
      : portal.description_en ?? portal.description_ar;

  return (
    <HeroCard variant="elevated" padding="lg">
      <Glow aria-hidden />
      <HeroBody>
        <BrandRow>
          {portal.company.logo_url ? (
            <CompanyLogo src={portal.company.logo_url} alt={portal.company.name} />
          ) : (
            <AppLogo src={landscape} alt={t('common:app.logoAlt')} />
          )}
          <Badge>{t('departmentPortal:portalBadge')}</Badge>
        </BrandRow>
        <Title>{name}</Title>
        {description ? <Description>{description}</Description> : null}
        <CompanyLine>{portal.company.name}</CompanyLine>
      </HeroBody>
    </HeroCard>
  );
};