import React from 'react';
import { ArrowDownRightIcon, ArrowUpRightIcon, EyeIcon } from 'lucide-react';

import {
  bandForScore,
  type ScoreBand,
} from '../../../lib/dashboard/score-bands';
import { useCopilot } from '../../../context/copilot.context';
import { TURN_CREDITS } from '../../../service/copilot/pricing';
import type {
  ScanHistoryPoint,
  WeeklyReportResponse,
} from '../../../service/visibility/visibility.interface';

/** One number on the strip, with everything needed to draw it. */
interface Metric {
  value: string;
  label: string;
  /** The same number last week, or empty when there is no last week. */
  previous: string;
  /** Week-over-week change, or null when there is nothing to compare. */
  delta: number | null;
  /** Unit appended to the delta. */
  deltaSuffix: string;
  /** Colour for the number itself. */
  valueColor: string;
  /** What this number means at its current level, when it has a reading. */
  reading: string;
}

/** One week-over-week change beside its number. */
function Delta({
  delta,
  suffix,
}: {
  delta: number | null;
  suffix: string;
}): React.ReactElement | null {
  if (delta === null) return null;
  const rounded: number = Math.round(delta * 10) / 10;
  if (rounded === 0) return null;
  const isUp: boolean = rounded > 0;
  const Icon = isUp ? ArrowUpRightIcon : ArrowDownRightIcon;

  return (
    <span
      className={`flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-xs font-semibold ${
        isUp
          ? 'bg-emerald-500/15 text-emerald-600'
          : 'bg-red-500/15 text-red-600'
      }`}
    >
      <Icon className="h-3 w-3" />
      {isUp ? '+' : ''}
      {rounded}
      {suffix}
    </span>
  );
}

/**
 * Where visibility stands this week, where it stood last week and — for the
 * score itself — what that level means, coloured on the same bands the
 * dashboard's ring uses. A number below the band where AI engines start
 * citing you should not be the same colour as one above it.
 */
export function WeekPanel({
  report,
  scans,
  onAsk,
}: {
  report: WeeklyReportResponse | null;
  scans: ScanHistoryPoint[];
  onAsk: (prompt: string) => void;
}): React.ReactElement {
  const copilot = useCopilot();
  const thisWeek: ScanHistoryPoint | undefined = scans[0];
  const lastWeek: ScanHistoryPoint | undefined = scans[1];

  if (!report && !thisWeek) {
    return (
      <section>
        <h2 className="flex items-center gap-2 text-sm font-semibold text-foreground">
          <EyeIcon className="h-4 w-4" />
          AI Visibility
        </h2>
        <button
          type="button"
          onClick={() => onAsk('Run my first AI Visibility scan')}
          className="mt-3 flex w-full cursor-pointer items-center justify-between gap-3 rounded-xl border border-border bg-muted px-4 py-3.5 text-left transition hover:bg-muted/70"
        >
          <span className="text-sm text-muted-foreground">
            No scan yet, so there is nothing to compare
          </span>
          <span className="text-sm font-medium text-foreground">
            Run the first one
            <span className="ml-1.5 text-xs font-normal text-muted-foreground">
              {TURN_CREDITS[copilot.thinking]} credits to ask
            </span>
          </span>
        </button>
      </section>
    );
  }

  const score: number =
    report?.visibility_score ?? thisWeek?.visibility_score ?? 0;
  const shareOfVoice: number =
    report?.share_of_voice ?? thisWeek?.share_of_voice ?? 0;
  const mentions: number =
    report?.brand_mentions ?? thisWeek?.brand_mentions ?? 0;
  const band: ScoreBand = bandForScore(score);

  // The report's own deltas first; the scan history stands in when this week
  // has no report row yet.
  const scoreDelta: number | null =
    report?.delta_score ??
    (lastWeek ? score - (lastWeek.visibility_score ?? 0) : null);
  const sovDelta: number | null =
    report?.delta_sov ??
    (lastWeek ? shareOfVoice - (lastWeek.share_of_voice ?? 0) : null);
  const mentionsDelta: number | null = lastWeek
    ? mentions - (lastWeek.brand_mentions ?? 0)
    : null;

  const metrics: readonly Metric[] = [
    {
      value: String(Math.round(score)),
      label: 'Visibility score',
      previous: lastWeek
        ? String(Math.round(lastWeek.visibility_score ?? 0))
        : '',
      delta: scoreDelta,
      deltaSuffix: '',
      valueColor: band.text,
      reading: band.label,
    },
    {
      value: `${Math.round(shareOfVoice)}%`,
      label: 'Share of voice',
      previous: lastWeek ? `${Math.round(lastWeek.share_of_voice ?? 0)}%` : '',
      delta: sovDelta,
      deltaSuffix: '%',
      valueColor: 'text-foreground',
      reading: '',
    },
    {
      value: String(mentions),
      label: 'Brand mentions',
      previous: lastWeek ? String(lastWeek.brand_mentions ?? 0) : '',
      delta: mentionsDelta,
      deltaSuffix: '',
      valueColor: 'text-foreground',
      reading: '',
    },
  ];

  return (
    <section>
      <h2 className="flex items-center gap-2 text-sm font-semibold text-foreground">
        <EyeIcon className="h-4 w-4" />
        AI Visibility
        <span className="text-xs font-normal text-muted-foreground">
          {report?.week_iso ?? thisWeek?.week_iso ?? ''}
        </span>
      </h2>

      <div className="mt-3 grid gap-3 @lg:grid-cols-3">
        {metrics.map(metric => (
          <div
            key={metric.label}
            className="rounded-xl border border-border bg-muted px-4 py-4"
          >
            <div className="flex items-center gap-2">
              <span
                className={`text-4xl leading-none font-bold tracking-tight ${metric.valueColor}`}
              >
                {metric.value}
              </span>
              <Delta delta={metric.delta} suffix={metric.deltaSuffix} />
            </div>
            <p className="mt-2 text-xs font-medium text-foreground">
              {metric.label}
            </p>
            {metric.reading && (
              <p className={`mt-1 text-[11px] ${metric.valueColor}`}>
                {metric.reading}
              </p>
            )}
            {metric.previous && (
              <p className="mt-1 text-[11px] text-muted-foreground">
                last week {metric.previous}
              </p>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}