import { Infinity as InfinityIcon, Lock, AlertTriangle, Star } from 'lucide-react'
import type { OptionResult } from './model'
import { money, signedMoney } from './format'

interface Props {
  r: OptionResult
  isWinner: boolean
  maxCost: number
  maxProfit: number
}

// PORT / KEEP / ADD share one horizontal cost bar so the three buckets read as
// one lifetime total, with the split shown by segment.
const SEGMENTS = [
  { key: 'port' as const, label: 'Port', color: 'var(--color-melodic)' },
  { key: 'keep' as const, label: 'Keep', color: 'var(--color-percs)' },
  { key: 'add' as const, label: 'Add', color: 'var(--color-tops)' },
  { key: 'update' as const, label: 'Update', color: 'var(--color-bass)' },
]

export function OptionRow({ r, isWinner, maxCost, maxProfit }: Props) {
  const { opt, cost, profit, vsBaseline } = r
  const offScale = cost.total > maxCost + 0.5 // outlier (Premium): bar maxes out
  const costW = maxCost > 0 ? Math.min(100, (cost.total / maxCost) * 100) : 0
  const profitW = maxProfit > 0 ? (Math.max(0, profit) / maxProfit) * 100 : 0

  return (
    <article
      className={`rounded-lg border bg-raised p-4 transition-colors ${
        isWinner ? 'border-magenta/60 bg-magenta/[0.04]' : 'border-hairline'
      }`}
    >
      <header className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
        <div className="flex items-center gap-2">
          <h3 className="text-[15px] font-semibold text-ink">{opt.name}</h3>
          {opt.recommended && (
            <span className="inline-flex items-center gap-1 rounded-sm bg-overlay px-1.5 py-0.5 text-[10px] font-medium text-tops">
              <Star size={10} /> recommended
            </span>
          )}
          {opt.baseline && (
            <span className="rounded-sm bg-overlay px-1.5 py-0.5 text-[10px] font-medium text-ink-faint">
              baseline
            </span>
          )}
        </div>
        <div className="flex items-center gap-1.5 text-ink-faint">
          {opt.ownsForever ? (
            <span title="Music stays up with no further payment" className="inline-flex items-center gap-1 text-[11px] text-ready">
              <Lock size={11} /> owned
            </span>
          ) : (
            <span title="Music is pulled from DSPs if you stop paying" className="inline-flex items-center gap-1 text-[11px] text-status-wip">
              <AlertTriangle size={11} /> rented
            </span>
          )}
        </div>
      </header>

      <p className="mt-1 text-xs leading-snug text-ink-muted">{opt.note}</p>

      <div className="mt-2 flex flex-wrap gap-1.5">
        {opt.facts.map((f) => (
          <span key={f} className="rounded-sm bg-overlay px-1.5 py-0.5 font-mono text-[10px] text-ink-muted tnum">
            {f}
          </span>
        ))}
      </div>

      {/* Cost bar: PORT · KEEP · ADD */}
      <div className="mt-4">
        <div className="mb-1 flex items-baseline justify-between text-[11px] text-ink-faint">
          <span>lifetime cost{offScale && <span className="ml-1 text-status-wip">· off scale</span>}</span>
          <span className="font-mono text-ink tnum">{money(cost.total)}</span>
        </div>
        <div className="flex h-2.5 w-full overflow-hidden rounded-full bg-overlay" style={{ width: `${Math.max(costW, 2)}%` }}>
          {SEGMENTS.map((s) =>
            cost[s.key] > 0 ? (
              <div
                key={s.key}
                style={{ flexGrow: cost[s.key], background: s.color }}
                title={`${s.label}: ${money(cost[s.key])}`}
              />
            ) : null,
          )}
        </div>
        <div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-0.5 text-[10px] text-ink-faint">
          {SEGMENTS.map((s) => (
            <span key={s.key} className="inline-flex items-center gap-1">
              <span aria-hidden className="inline-block size-1.5 rounded-full" style={{ background: s.color }} />
              {s.label} <span className="font-mono text-ink-muted tnum">{money(cost[s.key])}</span>
            </span>
          ))}
        </div>
      </div>

      {/* Net + delta vs baseline */}
      <div className="mt-4 flex items-end justify-between border-t border-hairline pt-3">
        <div>
          <div className="text-[11px] text-ink-faint">net over horizon</div>
          <div className="font-mono text-lg text-ink tnum">{money(profit)}</div>
          <div className="mt-1 h-1 w-28 overflow-hidden rounded-full bg-overlay">
            <div className="h-full rounded-full bg-ready/70" style={{ width: `${profitW}%` }} />
          </div>
        </div>
        <div className="text-right">
          <div className="text-[11px] text-ink-faint">vs RouteNote Free</div>
          <div
            className={`font-mono text-lg tnum ${
              vsBaseline > 0.5 ? 'text-ready' : vsBaseline < -0.5 ? 'text-blocked' : 'text-ink-muted'
            }`}
          >
            {signedMoney(vsBaseline)}
          </div>
        </div>
      </div>
    </article>
  )
}

export { InfinityIcon }
