import { lazy, Suspense, useEffect, useState } from 'react';
import { __, sprintf } from '../lib/i18n';

/**
 * WP dashboard (index.php) widget body (adoption plan Feature 3).
 *
 * Layout: score gauge row → 30d AI-visits trend → CTA footer.
 *
 * recharts is the heavy dependency here, so the trend chart
 * (BotTrafficChart) is lazy-loaded via dynamic import: the score row
 * paints first and the chart chunk loads afterwards, keeping the WP
 * dashboard's first paint light.
 */
const BotTrafficChart = lazy(() =>
  import('./bot-traffic-chart').then((m) => ({ default: m.BotTrafficChart }))
);

export interface WidgetData {
  overviewUrl: string;
  contentSettingsUrl: string;
  pluginUrl: string;
  restNamespace: string;
  llmsTxtExists: boolean;
  lastGenerated: string | null;
}

interface TimelineSummary {
  delta: number | null;
  trend: 'up' | 'down' | 'flat' | 'na' | string;
}

function gaugeColor(score: number): string {
  if (score >= 90) return '#22c55e';
  if (score >= 50) return '#f97316';
  return '#ef4444';
}

/** Small SVG donut gauge, color-banded like ScoreBadge (red/orange/green). */
function ScoreGauge({ score }: { score: number | null }) {
  const size = 64;
  const stroke = 7;
  const r = (size - stroke) / 2;
  const circumference = 2 * Math.PI * r;
  const clamped = score === null ? 0 : Math.max(0, Math.min(100, Math.round(score)));
  const color = score === null ? '#d1d5db' : gaugeColor(clamped);

  return (
    <svg
      width={size}
      height={size}
      viewBox={`0 0 ${size} ${size}`}
      role="img"
      aria-label={
        score === null
          ? __('AI visibility score not calculated yet', 'llmagnet-llm-txt-generator')
          : sprintf(__('AI visibility score %d of 100', 'llmagnet-llm-txt-generator'), clamped)
      }
    >
      <circle
        cx={size / 2}
        cy={size / 2}
        r={r}
        fill="none"
        stroke="#f0f0f1"
        strokeWidth={stroke}
      />
      <circle
        cx={size / 2}
        cy={size / 2}
        r={r}
        fill="none"
        stroke={color}
        strokeWidth={stroke}
        strokeLinecap="round"
        strokeDasharray={circumference}
        strokeDashoffset={circumference * (1 - clamped / 100)}
        transform={`rotate(-90 ${size / 2} ${size / 2})`}
      />
      <text
        x="50%"
        y="50%"
        dominantBaseline="central"
        textAnchor="middle"
        fontSize="18"
        fontWeight="700"
        fill={score === null ? '#9ca3af' : '#1f2937'}
      >
        {score === null ? '—' : clamped}
      </text>
    </svg>
  );
}

function ChartSkeleton() {
  return <div className="h-[160px] w-full animate-pulse rounded-lg bg-gray-100" aria-hidden="true" />;
}

export function WpDashboardWidget({ data }: { data: WidgetData }) {
  const [score, setScore] = useState<number | null>(null);
  const [scoreLoaded, setScoreLoaded] = useState(false);
  const [timeline, setTimeline] = useState<TimelineSummary | null>(null);

  const apiSettings = (window as any).wpApiSettings as { root?: string; nonce?: string } | undefined;
  const apiRoot: string = apiSettings?.root ?? '/wp-json/';

  useEffect(() => {
    const headers = { 'X-WP-Nonce': apiSettings?.nonce ?? '' };

    fetch(`${apiRoot}${data.restNamespace}/visibility-score`, {
      headers,
      credentials: 'same-origin',
    })
      .then((r) => (r.ok ? r.json() : null))
      .then((payload) => {
        if (payload && typeof payload.score === 'number') {
          setScore(payload.score);
        }
      })
      .catch(() => undefined)
      .finally(() => setScoreLoaded(true));

    fetch(`${apiRoot}${data.restNamespace}/visibility/timeline?range=30d`, {
      headers,
      credentials: 'same-origin',
    })
      .then((r) => (r.ok ? r.json() : null))
      .then((payload) => {
        if (payload) {
          setTimeline({ delta: payload.delta ?? null, trend: payload.trend ?? 'na' });
        }
      })
      .catch(() => undefined);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const delta = timeline?.delta;
  const showDelta = typeof delta === 'number' && timeline?.trend !== 'na';

  return (
    <div className="llmagnet-wpdw" style={{ fontSize: 13 }}>
      {/* Score row */}
      <div className="flex items-center gap-4">
        {scoreLoaded ? (
          <ScoreGauge score={score} />
        ) : (
          <div className="h-16 w-16 animate-pulse rounded-full bg-gray-100" aria-hidden="true" />
        )}
        <div>
          <div className="font-semibold text-gray-900">{__('AI Visibility Score', 'llmagnet-llm-txt-generator')}</div>
          <div className="text-gray-500">
            {score === null && scoreLoaded ? (
              __('Not calculated yet', 'llmagnet-llm-txt-generator')
            ) : (
              <>
                {__('Last 30 days', 'llmagnet-llm-txt-generator')}
                {showDelta && (
                  <span
                    className={
                      'ml-2 font-medium ' + (delta! >= 0 ? 'text-green-600' : 'text-red-600')
                    }
                  >
                    {delta! >= 0 ? '▲' : '▼'} {Math.abs(delta!)}
                  </span>
                )}
              </>
            )}
          </div>
        </div>
      </div>

      {/* 30d AI-visits trend — recharts chunk loads lazily after first paint */}
      <div className="llmagnet-wpdw-chart mt-4">
        {/* BotTrafficChart hard-codes its plot height for the full-page
            analytics view; constrain it to widget size without touching
            the shared component. */}
        <style>{'.llmagnet-wpdw-chart .h-\\[370px\\]{height:160px!important}'}</style>
        <Suspense fallback={<ChartSkeleton />}>
          <BotTrafficChart
            apiRoot={apiRoot}
            apiNamespace={data.restNamespace}
            timeRange="30d"
            renderHeader={() => null}
          />
        </Suspense>
      </div>

      {/* CTA footer */}
      <div className="mt-3 border-t border-gray-100 pt-3">
        {data.llmsTxtExists ? (
          <a
            href={data.overviewUrl}
            className="inline-block rounded-full px-4 py-1.5 font-medium text-white no-underline transition-all"
            style={{ background: 'linear-gradient(135deg, #a855f7 0%, #ec4899 100%)' }}
          >
            {__('Open LLMagnet →', 'llmagnet-llm-txt-generator')}
          </a>
        ) : (
          <a
            href={data.contentSettingsUrl}
            className="inline-block rounded-full px-4 py-1.5 font-medium text-white no-underline transition-all"
            style={{ background: 'linear-gradient(135deg, #a855f7 0%, #ec4899 100%)' }}
          >
            {__('Generate your llms.txt →', 'llmagnet-llm-txt-generator')}
          </a>
        )}
        {data.lastGenerated && (
          <span className="ml-3 text-gray-400">{sprintf(__('llms.txt updated %s', 'llmagnet-llm-txt-generator'), data.lastGenerated)}</span>
        )}
      </div>
    </div>
  );
}