import Link from 'next/link';
import { Panel } from '@/components/ui/panel';
import type { CompanyBullBear } from '@/lib/types';

type BullBearPanelProps = {
  bullBear: CompanyBullBear;
  researchHref: string;
  onLinkPrefetch?: () => void;
};

export function BullBearPanel(props: BullBearPanelProps) {
  const hasContent = props.bullBear.bull.length > 0 || props.bullBear.bear.length > 0;

  return (
    <Panel
      title="Bull vs Bear"
      subtitle="The highest-level reasons investors may lean in or lean out right now."
      className="pt-2"
    >
      {!hasContent ? (
        <div className="border-t border-dashed border-[color:var(--line-weak)] py-5 text-sm text-[color:var(--terminal-muted)]">
          No synthesis inputs are available yet. Add memo sections or filing context in Research to populate this debate surface.
          <div className="mt-4">
            <Link href={props.researchHref} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="text-xs uppercase tracking-[0.14em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
              Open research workspace
            </Link>
          </div>
        </div>
      ) : (
        <div className="grid gap-4 lg:grid-cols-2">
          <section className="border-t border-[rgba(150,245,191,0.24)] pt-5">
            <h3 className="text-lg font-semibold text-[color:var(--terminal-bright)]">Bull case</h3>
            <ul className="mt-4 space-y-3">
              {props.bullBear.bull.map((item) => (
                <li key={item} className="border-t border-[rgba(150,245,191,0.16)] pt-3">
                  <div className="flex gap-3 text-sm leading-6 text-[color:var(--terminal-bright)]">
                    <span
                      className="mt-1.5 h-0 w-0 shrink-0 border-x-[5px] border-x-transparent border-b-[8px] border-b-[#4ade80]"
                      aria-hidden="true"
                    />
                    <span>{item}</span>
                  </div>
                </li>
              ))}
            </ul>
          </section>

          <section className="border-t border-[rgba(255,159,159,0.24)] pt-5">
            <h3 className="text-lg font-semibold text-[color:var(--terminal-bright)]">Bear case</h3>
            <ul className="mt-4 space-y-3">
              {props.bullBear.bear.map((item) => (
                <li key={item} className="border-t border-[rgba(255,159,159,0.16)] pt-3">
                  <div className="flex gap-3 text-sm leading-6 text-[color:var(--terminal-bright)]">
                    <span
                      className="mt-1.5 h-0 w-0 shrink-0 border-x-[5px] border-x-transparent border-t-[8px] border-t-[#f87171]"
                      aria-hidden="true"
                    />
                    <span>{item}</span>
                  </div>
                </li>
              ))}
            </ul>
          </section>
        </div>
      )}
    </Panel>
  );
}