import type { ElementType, FiveElementsScore } from '@/lib/bazi/types';
import { cn } from '@/lib/cn';
import { ELEMENT_INFO } from '@/lib/bazi/guide';
import { useLocale } from '@/i18n/client';
import { ELEMENT_ORDER, ELEMENT_STYLE } from './elements';

export interface PillarGlyphs {
  label: string;
  stem: { chinese: string; element: ElementType };
  branch: { chinese: string; element: ElementType };
  highlight?: boolean;
}

export function FourPillarsGrid({ pillars, className }: { pillars: PillarGlyphs[]; className?: string }) {
  const info = ELEMENT_INFO[useLocale()];
  return (
    <div className={cn('grid grid-cols-4 text-center', className)}>
      {pillars.map((p) => (
        <div
          key={p.label}
          className={cn('rounded-xl py-1', p.highlight && 'bg-canvas ring-1 ring-line')}
        >
          <p className="text-[11px] text-subtle">{p.label}</p>
          <p
            className={cn('mt-3 font-serif text-[26px] leading-none', ELEMENT_STYLE[p.stem.element].text)}
            title={info[p.stem.element].name}
          >
            {p.stem.chinese}
          </p>
          <p
            className={cn('mt-3 font-serif text-[26px] leading-none', ELEMENT_STYLE[p.branch.element].text)}
            title={info[p.branch.element].name}
          >
            {p.branch.chinese}
          </p>
        </div>
      ))}
    </div>
  );
}

export function ElementBars({ elements, className }: { elements: FiveElementsScore; className?: string }) {
  const info = ELEMENT_INFO[useLocale()];
  return (
    <ul className={cn('space-y-2.5', className)}>
      {ELEMENT_ORDER.map((el) => (
        <li key={el} className="flex items-center gap-3 text-[11px]">
          <span className="w-12 shrink-0 text-ink-soft">{info[el].name}</span>
          <span className="h-[5px] flex-1 rounded-full bg-canvas">
            <span
              className={cn('block h-full rounded-full', ELEMENT_STYLE[el].bg)}
              style={{ width: `${elements[el]}%` }}
            />
          </span>
          <span className="w-8 shrink-0 text-right text-subtle tabular-nums">{elements[el]}%</span>
        </li>
      ))}
    </ul>
  );
}