import { Check } from 'lucide-react';
import { auraTypes, CHAKRA_SHAPES, type AuraType, type Band, type ChakraShape } from '@/lib/aura/auraReport';
import { useLocale, useMessages } from '@/i18n/client';
import { cn } from '@/lib/cn';

/** The twelve aura colour types on a vertical spectrum, with an arrow at the person's type. */
export function AuraTypeSpectrum({ active }: { active: AuraType }) {
  const types = auraTypes(useLocale());
  const gradient = `linear-gradient(to bottom, ${types.map((t) => t.color).join(', ')})`;
  return (
    <div className="flex gap-4 sm:gap-6">
      <div aria-hidden className="relative w-6 shrink-0 rounded-full sm:w-8" style={{ background: gradient }} />
      <ol className="min-w-0 flex-1 space-y-1">
        {types.map((t) => {
          const on = t.id === active.id;
          return (
            <li
              key={t.id}
              aria-current={on ? 'true' : undefined}
              className={cn(
                'relative rounded-xl px-3 py-2 text-[13px] leading-snug transition-colors',
                on ? 'bg-canvas ring-1 ring-line' : 'text-muted',
              )}
            >
              {on && (
                <span
                  aria-hidden
                  className="absolute top-1/2 -left-[22px] size-0 -translate-y-1/2 border-y-[7px] border-l-[10px] border-y-transparent sm:-left-[28px]"
                  style={{ borderLeftColor: t.color }}
                />
              )}
              <span
                className="font-semibold"
                style={{ color: t.id === 'putih' ? '#A8A29E' : t.color }}
              >
                {t.name}
              </span>{' '}
              <span className={on ? 'text-ink' : undefined}>{t.traits}</span>
            </li>
          );
        })}
      </ol>
    </div>
  );
}

/** Concentric rings 10–100 with the person's aura size drawn as a red circle. */
export function AuraSizeRings({ value, className }: { value: number; className?: string }) {
  const t = useMessages().insights;
  const r = (v: number) => 8 + (v / 100) * 88;
  return (
    <svg viewBox="0 0 200 200" className={className} role="img" aria-label={t.auraSize(value)}>
      <defs>
        <radialGradient id="aura-size-bg">
          <stop offset="0%" stopColor="#FEE2E2" stopOpacity="0.2" />
          <stop offset="100%" stopColor="#FCA5A5" stopOpacity="0.35" />
        </radialGradient>
      </defs>
      <circle cx="100" cy="100" r={r(100)} fill="url(#aura-size-bg)" />
      {[10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((v) => (
        <circle key={v} cx="100" cy="100" r={r(v)} fill="none" stroke="#F87171" strokeOpacity="0.22" />
      ))}
      <circle cx="100" cy="100" r={r(value)} fill="none" stroke="#DC2626" strokeWidth="4" />
      <text x="100" y="96" textAnchor="middle" className="fill-ink text-[26px] font-semibold">
        {value}
      </text>
      <text x="100" y="114" textAnchor="middle" className="fill-muted text-[9px] tracking-[0.15em] uppercase">
        {t.outOf100}
      </text>
    </svg>
  );
}

/** A chakra drawn in one of the six shapes. */
export function ChakraShapeIcon({ shape, color, className }: { shape: ChakraShape; color: string; className?: string }) {
  return (
    <svg viewBox="0 0 40 40" className={cn('size-10', className)} aria-hidden>
      {shape === 'besar' && (
        <path
          d="M20 3 C29 3 37 9 37 18 C37 28 31 37 20 37 C11 37 3 31 4 21 C5 13 9 3 20 3 Z M33 12 l4 -3 M7 30 l-4 3"
          fill={color}
          stroke={color}
          strokeWidth="1.5"
        />
      )}
      {shape === 'terang' && (
        <>
          <circle cx="20" cy="20" r="15" fill={color} opacity="0.25" />
          <circle cx="20" cy="20" r="12" fill={color} />
          <circle cx="16" cy="16" r="4" fill="#fff" opacity="0.6" />
        </>
      )}
      {shape === 'bulat' && <circle cx="20" cy="20" r="12" fill={color} />}
      {shape === 'lonjong' && <ellipse cx="20" cy="20" rx="8" ry="13" fill={color} />}
      {shape === 'kecil' && <circle cx="20" cy="20" r="6" fill={color} />}
      {shape === 'gelap' && (
        <>
          <circle cx="20" cy="20" r="12" fill={color} />
          <circle cx="20" cy="20" r="12" fill="#000" opacity="0.55" />
        </>
      )}
    </svg>
  );
}

export function ChakraShapeLegend() {
  const shapes = CHAKRA_SHAPES[useLocale()];
  return (
    <ul className="grid gap-3 sm:grid-cols-2">
      {(Object.keys(shapes) as ChakraShape[]).map((s) => (
        <li key={s} className="flex items-center gap-3">
          <ChakraShapeIcon shape={s} color="#E11D48" className="size-8 shrink-0" />
          <p className="text-[13px] leading-snug text-ink-soft">
            <span className="font-semibold text-ink">{shapes[s].label}:</span> {shapes[s].text}
          </p>
        </li>
      ))}
    </ul>
  );
}

/**
 * A vertical 0–100 meter beside three band statements, the person's band ticked —
 * the layout used for chakra activity and overall balance.
 */
export function BandMeter({
  value,
  color,
  bands,
  active,
}: {
  value: number;
  color: string;
  bands: Record<Band, { label: string; range: string; text: string }>;
  active: Band;
}) {
  return (
    <div className="flex gap-5">
      <div className="flex shrink-0 gap-1.5">
        <ol aria-hidden className="flex flex-col-reverse justify-between py-0.5 text-[10px] leading-none text-subtle tabular-nums">
          {[0, 20, 40, 60, 80, 100].map((n) => (
            <li key={n}>{n}</li>
          ))}
        </ol>
        <div className="relative h-36 w-7 overflow-hidden rounded-md bg-canvas ring-1 ring-line">
          <div
            className="absolute inset-x-0 bottom-0 rounded-t-sm"
            style={{ height: `${value}%`, background: `linear-gradient(to top, ${color}, ${color}cc)` }}
          />
        </div>
      </div>
      <ul className="flex flex-1 flex-col justify-between gap-2">
        {(['high', 'mid', 'low'] as Band[]).map((b) => {
          const on = b === active;
          return (
            <li key={b} className={cn('flex gap-2 text-[13px] leading-snug', on ? 'text-ink' : 'text-subtle')}>
              <Check className={cn('mt-0.5 size-4 shrink-0', on ? 'text-wood' : 'invisible')} aria-hidden />
              <p>
                <span className="font-semibold">
                  {bands[b].label} ({bands[b].range})
                </span>
                {on && <span className="text-ink-soft">. {bands[b].text}</span>}
              </p>
            </li>
          );
        })}
      </ul>
    </div>
  );
}