'use client'

import Link from 'next/link'

import { useI18n } from '@/components/providers/i18n-provider'
import { cn } from '@/lib/cn'

/**
 * Upstream, this asset, downstream (§29).
 *
 * Drawn as one chain rather than three lists, because the point is the direction: power
 * arrives from the left, passes through the unit in the middle, and reaches the people
 * on the right. That reading is what turns "T-108 is at risk" into "148,000 customers
 * are behind a unit that is at risk".
 */
export interface DependencyNode {
  code: string
  name: string
  nameAr: string
  assetTypeKey: string
  customersServed?: number
}

export function DependencyView({
  upstream,
  focus,
  downstream,
  downstreamCustomers,
  className,
}: {
  upstream: DependencyNode[]
  focus: DependencyNode | null
  downstream: DependencyNode[]
  downstreamCustomers: number
  className?: string
}) {
  const { t, locale, n } = useI18n()
  const ar = locale === 'ar'

  const Column = ({
    title,
    nodes,
    tone,
  }: {
    title: string
    nodes: DependencyNode[]
    tone: string
  }) => (
    <div className="min-w-0 flex-1">
      <p className="text-[10px] uppercase tracking-wide text-text-faint">{title}</p>
      {nodes.length === 0 ? (
        <p className="mt-1.5 text-[11px] text-text-faint">{t('twin.dependencies.none')}</p>
      ) : (
        <ul className="mt-1.5 space-y-1.5">
          {nodes.slice(0, 5).map((node) => (
            <li key={node.code}>
              <Link
                href={`/assets/${encodeURIComponent(node.code)}`}
                className={cn(
                  'block rounded-lg border bg-surface-2/40 px-2.5 py-1.5 transition-colors hover:border-brand/40',
                  tone,
                )}
              >
                <p className="font-mono text-[11px] text-text">{node.code}</p>
                <p className="truncate text-[10px] text-text-muted">{ar ? node.nameAr : node.name}</p>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  )

  return (
    <div className={cn('flex flex-wrap items-start gap-3', className)}>
      <Column title={t('twin.dependencies.upstream')} nodes={upstream} tone="border-info/30" />

      <span aria-hidden className="self-center text-text-faint">
        →
      </span>

      <div className="min-w-0 flex-1">
        <p className="text-[10px] uppercase tracking-wide text-text-faint">{t('twin.dependencies.focus')}</p>
        {focus ? (
          <div className="mt-1.5 rounded-lg border border-brand/45 bg-brand/8 px-2.5 py-1.5">
            <p className="font-mono text-[11px] font-semibold text-brand">{focus.code}</p>
            <p className="truncate text-[10px] text-text-muted">{ar ? focus.nameAr : focus.name}</p>
          </div>
        ) : null}
      </div>

      <span aria-hidden className="self-center text-text-faint">
        →
      </span>

      <Column title={t('twin.dependencies.downstream')} nodes={downstream} tone="border-accent/30" />

      <div className="w-full border-t border-border/70 pt-2 text-[11px] text-text-muted">
        {t('twin.dependencies.customers')}:{' '}
        <span className="tnum font-semibold text-text">{n(downstreamCustomers)}</span>
      </div>
    </div>
  )
}