'use client'

import { useTranslations } from 'next-intl'
import { PageHero } from '@/components/page-hero'
import { DataStates } from '@/components/api/data-states'
import { useFetchData } from '@/hooks/api'
import type { TeamDepartment } from '@/lib/api/entities'
import { useSiteData } from '@/contexts/site-data-context'

const valueKeys = [
  'excellence',
  'integrity',
  'innovation',
  'collaboration',
  'commitment',
  'diversity',
] as const

export default function OurTeamPage() {
  const { site } = useSiteData()
  const t = useTranslations('about.team')
  const { items, isLoading, isError, isEmpty, error, refetch } = useFetchData<TeamDepartment>({
    endpoint: 'team-departments',
    params: { page_size: 50 },
  })

  const departments = items ?? []
  const culturePoints = t.raw('culture.points') as string[]

  return (
    <main>
      <PageHero
        eyebrow={t('hero.eyebrow')}
        title={t('hero.title')}
        description={t('hero.description')}
      />

      <section className="border-b border-border/70 bg-white py-16 sm:py-20 md:py-24">
        <div className="container-wide">
          <h2 className="mb-8 font-heading text-3xl text-foreground sm:text-4xl">
            {t('org.title')}
          </h2>

          <DataStates
            isLoading={isLoading}
            isError={isError}
            isEmpty={isEmpty}
            error={error}
            loadingMessage={t('org.loading')}
            emptyMessage={t('org.empty')}
            onRetry={refetch}
            skeleton={
              <div className="mb-16 grid gap-4 md:grid-cols-2" aria-busy="true">
                {Array.from({ length: 4 }).map((_, i) => (
                  <div key={i} className="h-48 animate-pulse bg-muted" />
                ))}
              </div>
            }
          >
            <div className="mb-16 grid gap-4 md:grid-cols-2">
              {departments.map((dept) => (
                <article
                  key={dept.id}
                  className="border border-border/80 bg-[oklch(0.985_0.008_343)] p-6 transition duration-300 hover:border-secondary/40 hover:bg-white hover:shadow-[0_16px_40px_rgba(15,23,42,0.06)] sm:p-7"
                >
                  <h3 className="text-xl font-bold tracking-tight text-foreground">{dept.name}</h3>
                  {dept.description ? (
                    <p className="mt-2 text-sm leading-7 text-muted-foreground">{dept.description}</p>
                  ) : null}
                  <div className="mt-5 space-y-4">
                    <div>
                      <p className="mb-1 text-sm font-semibold text-muted-foreground">
                        {t('org.teamSize')}
                      </p>
                      <p className="font-heading text-2xl text-primary">{dept.teamSize}</p>
                    </div>
                    <div>
                      <p className="mb-2 text-sm font-semibold text-muted-foreground">
                        {t('org.responsibilities')}
                      </p>
                      <ul className="space-y-1">
                        {(dept.responsibilities ?? []).map((resp) => (
                          <li key={resp} className="text-sm text-foreground">
                            • {resp}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          </DataStates>

          <div className="mb-16">
            <h2 className="mb-8 font-heading text-3xl text-foreground sm:text-4xl">
              {t('values.title')}
            </h2>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {valueKeys.map((key) => (
                <article
                  key={key}
                  className="border border-border/80 bg-white p-6 text-center transition hover:border-secondary/40"
                >
                  <h3 className="text-lg font-bold text-primary">
                    {t(`values.items.${key}.title`)}
                  </h3>
                  <p className="mt-3 text-sm leading-7 text-muted-foreground">
                    {t(`values.items.${key}.description`)}
                  </p>
                </article>
              ))}
            </div>
          </div>

          <article className="border border-border/80 bg-[oklch(0.985_0.008_343)] p-6 sm:p-8">
            <h2 className="font-heading text-2xl text-foreground sm:text-3xl">
              {t('culture.title')}
            </h2>
            <div className="mt-5 space-y-4">
              <p className="text-base leading-7 text-muted-foreground">
                {t('culture.intro', { fullName: site.fullName })}
              </p>
              <ul className="grid gap-4 md:grid-cols-2">
                {culturePoints.map((item) => (
                  <li key={item} className="flex gap-2 text-sm text-foreground sm:text-base">
                    <span className="font-bold text-primary">•</span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </article>
        </div>
      </section>
    </main>
  )
}