import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { apiFetch } from '../lib/api';
import PageScanner from './PageScanner';
import ScanSlideIn from './ScanSlideIn';
import { DashboardSkeleton } from './Skeleton';
import type { PageScanSummary } from '../lib/types';

export default function Dashboard() {
  const [selectedScan, setSelectedScan] = useState<PageScanSummary | null>(null);

  const { data: pageScans = {}, isLoading, isError } = useQuery({
    queryKey: ['page-scans'],
    queryFn:  () => apiFetch<Record<string, PageScanSummary>>('/page-scans'),
    staleTime: 0,
  });

  if (isLoading) return <DashboardSkeleton />;
  if (isError) return <div className="aai-error aai-card" style={{ margin: 24 }}>Failed to load scan data. Please refresh the page.</div>;

  // Aggregate issue counts across all scanned pages, including best-practice
  // items — they still carry a real severity and are counted in scan.failed,
  // so excluding them here would under-count Warnings/Notices vs the totals
  // shown elsewhere (e.g. the "Issues by Page" bar and ScanSlideIn's modal).
  const allIssues = Object.values(pageScans).flatMap((s) => s.issues ?? []);
  const critical  = allIssues.filter((i) => i.severity === 'critical').length;
  const serious   = allIssues.filter((i) => i.severity === 'serious').length;
  const warning   = allIssues.filter((i) => i.severity === 'warning').length;
  const notice    = allIssues.filter((i) => i.severity === 'notice').length;
  // "Issues found" is the full total — matches the "All" tab in the frontend
  // overlay/ScanSlideIn (critical + serious + warning + notice, WCAG + best-practice).
  const total      = allIssues.length;
  const passed     = Object.values(pageScans).reduce((sum, s) => sum + (s.passed ?? 0), 0);
  const hasData    = Object.keys(pageScans).length > 0;

  return (
    <div className="aai-dashboard">

      {/* Stats row */}
      {hasData && (
        <>
          <div className="aai-stats-row">
            <StatCard label="Issues found"    value={total} variant="total"    />
            <StatCard label="Critical issues" value={critical} variant="critical" />
            <StatCard label="Serious issues"  value={serious}  variant="serious"  />
            <StatCard label="Warnings"        value={warning}  variant="warning"  />
            <StatCard label="Notices"         value={notice}   variant="notice"   />
            <StatCard label="Passed checks"   value={passed}   variant="passed"   />
          </div>
          <p className="aai-stats-disclaimer">
            Automated accessibility score based on detected issues.{' '}
            <span title="This score is based on automated checks. Some accessibility issues may require manual testing.">
              Some issues may require manual testing. ⓘ
            </span>
          </p>
          <p className="aai-dashboard-tip">
            💡 Tip: Fix critical issues first for the biggest accessibility impact.
          </p>
        </>
      )}

      {/* Issues by page chart */}
      {hasData && (
        <div className="aai-trend-card">
          <h3 className="aai-pane-title">Issues by Page</h3>
          <p className="aai-chart-sub">Top pages ranked by number of accessibility issues</p>
          <IssuesByPage pageScans={pageScans} onOpenScan={setSelectedScan} />
        </div>
      )}

      {/* Pages & Posts scanner (main dashboard view) */}
      <PageScanner />

      <ScanSlideIn scan={selectedScan} onClose={() => setSelectedScan(null)} />

    </div>
  );
}

// ── Issues by page bar chart ───────────────────────────────────

function IssuesByPage({ pageScans, onOpenScan }: { pageScans: Record<string, PageScanSummary>; onOpenScan: (scan: PageScanSummary) => void }) {
  // Ranked and counted by the full issues array (matches the frontend "All" tab),
  // not the separately-stored scan.failed field, so this can't drift out of sync.
  const pages = Object.values(pageScans)
    .filter((s) => (s.issues ?? []).length > 0)
    .sort((a, b) => (b.issues ?? []).length - (a.issues ?? []).length)
    .slice(0, 7);

  if (pages.length === 0) return (
    <p className="aai-chart-empty">No issues detected across scanned pages.</p>
  );

  const maxTotal = pages[0].issues?.length || 1;

  return (
    <div className="aai-ibc">
      {pages.map((scan) => {
        const scanIssues = scan.issues ?? [];
        const crit = scanIssues.filter((i) => i.severity === 'critical').length;
        const ser  = scanIssues.filter((i) => i.severity === 'serious').length;
        const warn = scanIssues.filter((i) => i.severity === 'warning').length;
        const note = scanIssues.filter((i) => i.severity === 'notice').length;
        const total = scanIssues.length;
        const pathname = (() => {
          try {
            const u = new URL(scan.url);
            // Strip a trailing slash that trailingslashit() incorrectly appended after query params
            // (e.g. http://example.com/?cat=1/ → /?cat=1, not /?cat=1/)
            const search = u.search.replace(/\/$/, '');
            return (u.pathname + search) || '/';
          } catch { return scan.url; }
        })();
        const label   = scan.title || pathname;
        const barPct = (total / maxTotal) * 100;
        return (
          <div key={scan.url} className="aai-ibc__row">
            <button
              className="aai-ibc__label aai-ibc__label--link"
              title={scan.url}
              onClick={() => onOpenScan(scan)}
            >{label}</button>
            <div className="aai-ibc__track">
              <div className="aai-ibc__bar" style={{ width: `${barPct}%` }}>
                {crit > 0 && <span className="aai-ibc__seg aai-ibc__seg--critical" style={{ flex: crit }} />}
                {ser  > 0 && <span className="aai-ibc__seg aai-ibc__seg--serious"  style={{ flex: ser  }} />}
                {warn > 0 && <span className="aai-ibc__seg aai-ibc__seg--warning"  style={{ flex: warn }} />}
                {note > 0 && <span className="aai-ibc__seg aai-ibc__seg--notice"   style={{ flex: note }} />}
              </div>
              <span className="aai-ibc__count">{total}</span>
            </div>
          </div>
        );
      })}
      <div className="aai-ibc__legend">
        <span><em className="aai-ibc__dot aai-ibc__dot--critical" />Critical</span>
        <span><em className="aai-ibc__dot aai-ibc__dot--serious"  />Serious</span>
        <span><em className="aai-ibc__dot aai-ibc__dot--warning"  />Warning</span>
        <span><em className="aai-ibc__dot aai-ibc__dot--notice"   />Notice</span>
      </div>
    </div>
  );
}

// ── Stat card ──────────────────────────────────────────────────

function StatCard({ label, value, variant }: { label: string; value: number; variant: string }) {
  return (
    <div className={`aai-stat-card aai-stat-card--${variant}`}>
      <span className="aai-stat-card__value">{value}</span>
      <span className="aai-stat-card__label">{label}</span>
    </div>
  );
}