import React, { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Card } from '../components/Card';
import { ProgressBar } from '../components/ProgressBar';
import { Badge } from '../components/Badge';
import { useConfig, externalApiFetch } from '../hooks/useApi';
import { CHECKLIST_DATA } from '@cra-compliance/shared';
import { useCompliance } from '../context/ComplianceContext';
import type { DashboardStats } from '@cra-compliance/types';

interface DashboardProps {
  onNavigate: (page: 'checklist' | 'documents' | 'scanner' | 'incidents' | 'education' | 'settings') => void;
}

export function Dashboard({ onNavigate }: DashboardProps) {
  const config = useConfig();
  const { progress, loading: checklistLoading, totalItems, completedItems, compliancePercent } = useCompliance();
  const isPremium = config.plan !== 'free';

  const statsQuery = useQuery<DashboardStats>({
    queryKey: ['dashboard'],
    enabled: isPremium,
    queryFn: async () => {
      const res = await externalApiFetch<{ data: DashboardStats }>('/api/dashboard');
      return res.data;
    },
    staleTime: 5 * 60 * 1000,
    refetchInterval: 5 * 60 * 1000,
  });

  const stats = statsQuery.data ?? null;

  // CRA deadline info
  const reportingDeadline = new Date('2026-09-11');
  const fullDeadline = new Date('2027-12-11');
  const now = new Date();
  const daysUntilReporting = Math.max(0, Math.ceil((reportingDeadline.getTime() - now.getTime()) / 86400000));
  const daysUntilFull = Math.max(0, Math.ceil((fullDeadline.getTime() - now.getTime()) / 86400000));
  const reportingPassed = reportingDeadline < now;
  const fullPassed = fullDeadline < now;

  // Score: for paid users use API score, for free use checklist %
  const displayScore = stats ? stats.compliance_score : compliancePercent;

  const scoreColor = displayScore >= 80 ? 'var(--cra-green)' : displayScore >= 50 ? 'var(--cra-yellow)' : 'var(--cra-red)';

  // Review nudge: free users, >50% checklist, 30+ days since first load, not dismissed
  const FIRST_LOAD_KEY = 'resicoma_first_load';
  const REVIEW_DISMISSED_KEY = 'resicoma_review_dismissed';
  const [reviewDismissed, setReviewDismissed] = useState(() => !!localStorage.getItem(REVIEW_DISMISSED_KEY));

  // Record first load timestamp on mount
  if (!localStorage.getItem(FIRST_LOAD_KEY)) {
    localStorage.setItem(FIRST_LOAD_KEY, String(Date.now()));
  }
  const firstLoadMs = Number(localStorage.getItem(FIRST_LOAD_KEY) || Date.now());
  const daysSinceFirstLoad = (Date.now() - firstLoadMs) / 86400000;
  const showReviewNudge = !isPremium && !reviewDismissed && compliancePercent >= 50 && daysSinceFirstLoad >= 30;

  if (checklistLoading) {
    return <div className="cra-loading">Loading dashboard...</div>;
  }

  return (
    <div className="cra-dashboard">
      <div className="cra-page-header">
        <div>
          <h2>Dashboard</h2>
          <p className="cra-muted" style={{ margin: 0, fontSize: '13px' }}>
            CRA reporting obligations: {reportingPassed ? 'active now' : `${daysUntilReporting} days away`}
            {!fullPassed && ` · Full compliance: ${daysUntilFull} days`}
          </p>
        </div>
        <Badge variant={reportingPassed ? 'danger' : daysUntilReporting < 90 ? 'warning' : 'neutral'}>
          {reportingPassed ? 'Deadline Active' : `${daysUntilReporting}d to report deadline`}
        </Badge>
      </div>

      {/* Overdue incident urgent banner */}
      {stats && stats.overdue_incidents > 0 && (
        <div className="cra-alert cra-alert-error" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>
            <strong>{stats.overdue_incidents} overdue incident{stats.overdue_incidents !== 1 ? 's' : ''}.</strong>
            {' '}CRA Article 14 requires notification to your national CSIRT within 24 hours of awareness.
          </span>
          <button className="cra-btn cra-btn-sm" style={{ flexShrink: 0, marginLeft: 12 }} onClick={() => onNavigate('incidents')}>
            View Incidents
          </button>
        </div>
      )}

      {/* Critical vuln banner */}
      {stats && stats.critical_vulnerabilities > 0 && (
        <div className="cra-alert cra-alert-warning" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>
            <strong>{stats.critical_vulnerabilities} critical vulnerability{stats.critical_vulnerabilities !== 1 ? 'ies' : 'y'}.</strong>
            {' '}Review and remediate, or start an incident if actively exploited.
          </span>
          <button className="cra-btn cra-btn-sm" style={{ flexShrink: 0, marginLeft: 12 }} onClick={() => onNavigate('scanner')}>
            View Scanner
          </button>
        </div>
      )}

      {/* Stats Grid */}
      <div className="cra-stats-grid">
        <Card>
          <div className="cra-stat">
            <div className="cra-stat-value" style={{ color: scoreColor }}>{displayScore}%</div>
            <div className="cra-stat-label">Compliance Score</div>
            <ProgressBar value={displayScore} size="sm" />
            {isPremium && stats ? (
              <ScoreBreakdown stats={stats} />
            ) : (
              <p style={{ fontSize: '11px', color: 'var(--cra-muted)', marginTop: 6, marginBottom: 0 }}>
                Based on checklist only. Upgrade for full score including vuln data.
              </p>
            )}
          </div>
        </Card>
        <Card>
          <div className="cra-stat">
            <div className="cra-stat-value">{completedItems}/{totalItems}</div>
            <div className="cra-stat-label">Checklist Complete</div>
          </div>
        </Card>
        {isPremium && stats ? (
          <>
            <Card>
              <div className="cra-stat">
                <div className="cra-stat-value" style={{ color: stats.open_vulnerabilities > 0 ? 'var(--cra-red)' : 'var(--cra-green)' }}>
                  {stats.open_vulnerabilities}
                </div>
                <div className="cra-stat-label">Open Vulnerabilities</div>
                {stats.critical_vulnerabilities > 0 && (
                  <p style={{ fontSize: '11px', color: 'var(--cra-red)', marginTop: 4, marginBottom: 0 }}>
                    {stats.critical_vulnerabilities} critical
                  </p>
                )}
              </div>
            </Card>
            <Card>
              <div className="cra-stat">
                <div className="cra-stat-value" style={{ color: stats.overdue_incidents > 0 ? 'var(--cra-red)' : stats.open_incidents > 0 ? 'var(--cra-yellow)' : 'var(--cra-green)' }}>
                  {stats.open_incidents}
                </div>
                <div className="cra-stat-label">Open Incidents</div>
                {stats.overdue_incidents > 0 && (
                  <p style={{ fontSize: '11px', color: 'var(--cra-red)', marginTop: 4, marginBottom: 0 }}>
                    {stats.overdue_incidents} overdue
                  </p>
                )}
              </div>
            </Card>
          </>
        ) : (
          <>
            <Card>
              <div className="cra-stat cra-stat-locked" onClick={() => onNavigate('scanner')}>
                <div className="cra-stat-value cra-stat-locked-value">—</div>
                <div className="cra-stat-label">Open Vulnerabilities</div>
                <p style={{ fontSize: '11px', color: 'var(--cra-muted)', marginTop: 4, marginBottom: 0 }}>Upgrade to scan</p>
              </div>
            </Card>
            <Card>
              <div className="cra-stat">
                <Badge variant={isPremium ? 'success' : 'neutral'}>{config.plan.toUpperCase()}</Badge>
                <div className="cra-stat-label" style={{ marginTop: 8 }}>Current Plan</div>
              </div>
            </Card>
          </>
        )}
      </div>

      {/* Scan + incident summary for paid users */}
      {isPremium && stats && (
        <div className="cra-dashboard-row">
          <Card title="Vulnerability Summary" actions={
            <button className="cra-btn cra-btn-sm" onClick={() => onNavigate('scanner')}>Go to Scanner →</button>
          }>
            <div className="cra-dash-vuln-grid">
              {[
                { label: 'Critical', count: stats.critical_vulnerabilities, color: 'var(--cra-red)' },
                { label: 'High', count: stats.high_vulnerabilities, color: 'var(--cra-orange)' },
                { label: 'Medium', count: stats.medium_vulnerabilities, color: 'var(--cra-yellow)' },
                { label: 'Total Open', count: stats.open_vulnerabilities, color: 'var(--cra-text)' },
              ].map(({ label, count, color }) => (
                <div key={label} className="cra-dash-vuln-cell">
                  <span className="cra-dash-vuln-count" style={{ color }}>{count}</span>
                  <span className="cra-dash-vuln-label">{label}</span>
                </div>
              ))}
            </div>
            {stats.last_scan_at ? (
              <p className="cra-muted" style={{ fontSize: '12px', marginTop: 12, marginBottom: 0 }}>
                Last scan: {new Date(stats.last_scan_at).toLocaleString()}
                {stats.next_scan_at && ` · Next: ${new Date(stats.next_scan_at).toLocaleString()}`}
              </p>
            ) : (
              <p className="cra-muted" style={{ fontSize: '12px', marginTop: 12, marginBottom: 0 }}>
                No scan yet. Go to the Scanner to add plugins and run your first scan.
              </p>
            )}
          </Card>

          <Card title="Incident Status" actions={
            <button className="cra-btn cra-btn-sm" onClick={() => onNavigate('incidents')}>Go to Incidents →</button>
          }>
            {stats.open_incidents === 0 ? (
              <p className="cra-muted" style={{ fontSize: '13px' }}>No open incidents. Create one from a vulnerability when active exploitation is confirmed.</p>
            ) : (
              <div className="cra-dash-incident-summary">
                <div className="cra-dash-vuln-grid">
                  <div className="cra-dash-vuln-cell">
                    <span className="cra-dash-vuln-count" style={{ color: stats.open_incidents > 0 ? 'var(--cra-yellow)' : 'var(--cra-green)' }}>{stats.open_incidents}</span>
                    <span className="cra-dash-vuln-label">Open</span>
                  </div>
                  <div className="cra-dash-vuln-cell">
                    <span className="cra-dash-vuln-count" style={{ color: stats.overdue_incidents > 0 ? 'var(--cra-red)' : 'var(--cra-green)' }}>{stats.overdue_incidents}</span>
                    <span className="cra-dash-vuln-label">Overdue</span>
                  </div>
                </div>
                {stats.most_urgent_deadline_at && (
                  <p className="cra-muted" style={{ fontSize: '12px', marginTop: 12, marginBottom: 0 }}>
                    Most urgent deadline: {new Date(stats.most_urgent_deadline_at).toLocaleString()}
                  </p>
                )}
              </div>
            )}
          </Card>
        </div>
      )}

      {/* Quick Actions + Category Progress side by side */}
      <div className="cra-dashboard-row">
        <div className="cra-section" style={{ marginBottom: 0 }}>
          <h3 style={{ fontSize: '11px', fontWeight: 700, color: 'var(--cra-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: 10 }}>
            Quick Actions
          </h3>
          <div className="cra-quick-actions">
            <button className="cra-action-card" onClick={() => onNavigate('checklist')}>
              <span className="cra-action-icon">✅</span>
              <span className="cra-action-title">Compliance Checklist</span>
              <span className="cra-action-desc">{completedItems}/{totalItems} items done</span>
            </button>
            <button className="cra-action-card" onClick={() => onNavigate('documents')}>
              <span className="cra-action-icon">📄</span>
              <span className="cra-action-title">Document Generator</span>
              <span className="cra-action-desc">Create required CRA documents</span>
            </button>
            <button className="cra-action-card" onClick={() => onNavigate('scanner')}>
              <span className="cra-action-icon">🔍</span>
              <span className="cra-action-title">Vulnerability Scanner</span>
              <span className="cra-action-desc">
                {isPremium
                  ? stats?.total_plugins
                    ? `${stats.total_plugins} plugin${stats.total_plugins !== 1 ? 's' : ''} monitored`
                    : 'Add plugins to monitor'
                  : 'Upgrade to unlock'}
              </span>
            </button>
            <button className="cra-action-card" onClick={() => onNavigate('incidents')}>
              <span className="cra-action-icon">🚨</span>
              <span className="cra-action-title">Incident Center</span>
              <span className="cra-action-desc">
                {isPremium
                  ? stats?.open_incidents
                    ? `${stats.open_incidents} open${stats.overdue_incidents ? `, ${stats.overdue_incidents} overdue` : ''}`
                    : 'No open incidents'
                  : 'Upgrade to unlock'}
              </span>
            </button>
          </div>
        </div>

        <Card title="Compliance by Category">
          {CHECKLIST_DATA.map((category) => {
            const catCompleted = category.items.filter((item) => progress[item.id]?.completed).length;
            const catTotal = category.items.length;
            return (
              <div key={category.id} style={{ marginBottom: '12px' }}>
                <ProgressBar value={catCompleted} max={catTotal} label={category.title} size="sm" />
              </div>
            );
          })}
        </Card>
      </div>

      {/* WordPress.org review nudge */}
      {showReviewNudge && (
        <div className="cra-review-nudge">
          <div className="cra-review-nudge-content">
            <span className="cra-review-nudge-icon">⭐</span>
            <div>
              <strong>Enjoying ResilienceWP?</strong>
              <p>You've completed {compliancePercent}% of your CRA checklist. If this plugin has helped you, a review on WordPress.org takes 30 seconds and means a lot.</p>
            </div>
          </div>
          <div className="cra-review-nudge-actions">
            <a
              href="https://wordpress.org/support/plugin/resilience-compliance-manager/reviews/#new-post"
              target="_blank"
              rel="noopener noreferrer"
              className="cra-btn cra-btn-primary cra-btn-sm"
              onClick={() => {
                localStorage.setItem(REVIEW_DISMISSED_KEY, '1');
                setReviewDismissed(true);
              }}
            >
              Leave a review →
            </a>
            <button
              className="cra-btn cra-btn-sm"
              onClick={() => {
                localStorage.setItem(REVIEW_DISMISSED_KEY, '1');
                setReviewDismissed(true);
              }}
            >
              Maybe later
            </button>
          </div>
        </div>
      )}

      {/* Upgrade CTA for free users */}
      {!isPremium && (
        <Card>
          <div className="cra-upgrade-table-cta">
            <div className="cra-upgrade-table-header">
              <h3>Automate Your CRA Compliance</h3>
              <p className="cra-muted">The free plan covers paperwork. Paid plans cover the ongoing obligations that have fines attached.</p>
            </div>
            <table className="cra-feature-table">
              <thead>
                <tr>
                  <th>Feature</th>
                  <th>Free</th>
                  <th>Basic <span className="cra-muted" style={{ fontWeight: 400 }}>$49/yr</span></th>
                  <th>Pro <span className="cra-muted" style={{ fontWeight: 400 }}>$99/yr</span></th>
                </tr>
              </thead>
              <tbody>
                {[
                  ['Compliance checklist', true, true, true],
                  ['Document generator', true, true, true],
                  ['CRA education guide', true, true, true],
                  ['Vulnerability scanning', false, '5 plugins, weekly', '20 plugins, daily'],
                  ['Email alerts', false, true, true],
                  ['Incident Center (24h timer)', false, true, true],
                  ['Evidence export', false, false, true],
                  ['Webhook integrations', false, false, true],
                  ['Priority support', false, false, true],
                ].map(([feature, free, basic, pro]) => (
                  <tr key={String(feature)}>
                    <td>{feature}</td>
                    {[free, basic, pro].map((val, i) => (
                      <td key={i} style={{ textAlign: 'center' }}>
                        {val === true ? <span style={{ color: 'var(--cra-green)', fontWeight: 700 }}>✓</span>
                          : val === false ? <span style={{ color: 'var(--cra-muted)' }}>—</span>
                          : <span style={{ fontSize: '12px' }}>{val}</span>}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
            <div style={{ textAlign: 'center', marginTop: 20 }}>
              <a
                href="https://www.resiliencewp.com/pricing"
                target="_blank"
                rel="noopener noreferrer"
                className="cra-btn cra-btn-primary cra-btn-lg"
              >
                View Pricing →
              </a>
            </div>
          </div>
        </Card>
      )}
    </div>
  );
}

function ScoreBreakdown({ stats }: { stats: DashboardStats }) {
  const [open, setOpen] = useState(false);

  const deductions: { label: string; value: number; per: string; color: string }[] = [
    { label: 'Critical vulns', value: stats.critical_vulnerabilities, per: '−15 pts each', color: 'var(--cra-red)' },
    { label: 'High vulns', value: stats.high_vulnerabilities, per: '−7 pts each', color: 'var(--cra-orange)' },
    { label: 'Medium vulns', value: stats.medium_vulnerabilities, per: '−3 pts each', color: 'var(--cra-yellow)' },
    { label: 'Overdue incidents', value: stats.overdue_incidents, per: '−20 pts each', color: 'var(--cra-red)' },
    { label: 'Open incidents', value: stats.open_incidents - stats.overdue_incidents, per: '−5 pts each', color: 'var(--cra-yellow)' },
  ].filter((d) => d.value > 0);

  if (deductions.length === 0) {
    return (
      <p style={{ fontSize: '11px', color: 'var(--cra-green)', marginTop: 6, marginBottom: 0 }}>
        No active deductions — well done.
      </p>
    );
  }

  return (
    <div style={{ marginTop: 8 }}>
      <button
        className="cra-btn-text"
        style={{ fontSize: '11px' }}
        onClick={() => setOpen((v) => !v)}
      >
        {open ? 'Hide breakdown ▴' : 'See score deductions ▾'}
      </button>
      {open && (
        <div className="cra-score-breakdown">
          {deductions.map((d) => (
            <div key={d.label} className="cra-score-breakdown-row">
              <span style={{ color: d.color, fontWeight: 600 }}>{d.value}×</span>
              <span>{d.label}</span>
              <span className="cra-score-breakdown-pts">{d.per}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}