import { SectionMissingSiteTag } from "../_lib/empty-states";
import type { AnnotationViewModel } from "../_lib/types";

type Severity = "critical" | "high" | "moderate";

interface Props {
  annotation: AnnotationViewModel;
  isSiteTagInstalled: boolean;
}

const MARKER_COLORS: Record<Severity, string> = {
  critical: "bg-red-500",
  high:     "bg-amber-500",
  moderate: "bg-blue-500",
};

const MARKER_POSITIONS: Array<{ top?: string; right?: string; left?: string; bottom?: string }> = [
  { top: "24px",  right: "24px" },
  { top: "88px",  left: "12px"  },
  { top: "142px", right: "36px" },
  { bottom: "52px", left: "32px" },
];

export function Annotation({ annotation, isSiteTagInstalled }: Props) {
  if (!annotation.available) {
    return (
      <section className="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-subtle p-7">
        <SectionMissingSiteTag isInstalled={isSiteTagInstalled} />
      </section>
    );
  }

  return (
    <section className="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-subtle grid grid-cols-1 lg:grid-cols-[1.4fr_1fr] min-h-[460px]">

      {/* Left: Page preview */}
      <div className="bg-slate-100 p-4 border-b lg:border-b-0 lg:border-r border-slate-200 relative">
        {/* Toolbar */}
        <div className="absolute top-4 left-4 right-4 flex items-center justify-between px-3 py-2 bg-white border border-slate-200 rounded-lg z-10 shadow-subtle">
          <div className="flex gap-0.5 bg-slate-50 p-0.5 rounded-md">
            <button className="px-3 py-1 text-[11px] font-medium bg-white text-slate-900 rounded shadow-subtle">
              Desktop
            </button>
            <button className="px-3 py-1 text-[11px] font-medium text-slate-600 rounded hover:text-slate-900 transition-colors">
              Mobile
            </button>
          </div>
          <button className="text-[11px] font-medium text-red-600 hover:text-red-700 transition-colors flex items-center gap-1">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth={1.5}>
              <path d="M2 6h4m0 0l-2-2m2 2L4 8M6 6h4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            Compare to competitor
          </button>
        </div>

        {/* Page content placeholder */}
        <div
          className="mt-14 bg-white rounded-md p-7 relative border border-slate-200 shadow-card min-h-[360px]"
          style={{ fontFamily: "Georgia, serif" }}
        >
          <div className="font-sans text-[13px] font-bold text-red-600 mb-4 pb-3 border-b border-slate-200 tracking-tight">
            {annotation.pageTitle}
          </div>
          <h1 className="text-[22px] font-semibold text-slate-900 mb-1.5 leading-snug">
            {annotation.pageTitle}
          </h1>
          <p className="font-sans text-[11px] text-slate-500 mb-4">Reviewed by site team</p>
          <div className="text-[13px] leading-relaxed text-slate-700 space-y-3">
            <p>Numbered markers indicate specific issues found on this page. Click any marker to see the full recommendation.</p>
          </div>

          {/* Annotation markers */}
          {annotation.findings.map((finding, i) => {
            const pos = MARKER_POSITIONS[i] ?? { top: "50%", left: "50%" };
            const color = MARKER_COLORS[finding.severity];
            return (
              <div
                key={finding.num}
                className={`absolute w-7 h-7 rounded-full ${color} flex items-center justify-center text-white text-[12px] font-bold border-[3px] border-white shadow-lg z-10 cursor-pointer hover:scale-110 transition-transform`}
                style={pos}
              >
                {finding.num}
              </div>
            );
          })}
        </div>
      </div>

      {/* Right: Findings list */}
      <div className="p-5 flex flex-col gap-2.5 overflow-y-auto">
        <div className="text-[11px] font-semibold text-slate-500 uppercase tracking-widest pb-2 border-b border-slate-200 mb-1">
          {annotation.findings.length} findings on this page
        </div>

        {annotation.findings.map((finding) => {
          const color = MARKER_COLORS[finding.severity];
          return (
            <div
              key={finding.num}
              className="flex gap-3 p-3 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-white hover:border-slate-300 hover:shadow-subtle transition-all"
            >
              <div className={`w-6 h-6 rounded-full ${color} flex items-center justify-center text-white text-[11px] font-bold shrink-0`}>
                {finding.num}
              </div>
              <div>
                <p className="text-[13px] font-semibold text-slate-900 mb-0.5">{finding.title}</p>
                <p className="text-[11px] text-slate-500 leading-relaxed">{finding.desc}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}
