/**
 * DashboardPageFree.tsx
 *
 * FREE edition: React component for dashboard-page.
 * Data is injected by PHP via wp_localize_script into window.pdfibDashboardData.
 * NOTE: No premium badges, no upgrade prompts, no pricing sections.
 */

import React from 'react';
import type { DashboardData } from './DashboardPage';

declare global {
  interface Window {
    pdfibDashboardData?: DashboardData;
  }
}

const StatCard: React.FC<{ value: number; label: string }> = ({ value, label }) => (
  <div className="pdfb-stat-card">
    <div className="pdfb-stat-content">
      <div className="pdfb-stat-number">{value.toLocaleString()}</div>
      <div className="pdfb-stat-label">{label}</div>
    </div>
  </div>
);

interface GuideStepProps {
  number: number;
  title: string;
  desc: string;
  hint: string;
  url: string;
}

const GuideStep: React.FC<GuideStepProps> = ({ number, title, desc, hint, url }) => (
  <a href={url} className="pdfb-step pdfb-step-link">
    <span className="pdfb-step-number">{number}</span>
    <div className="pdfb-step-content">
      <h4>{title}</h4>
      <p>{desc}</p>
      <small>{hint}</small>
    </div>
  </a>
);

const DashboardPageFree: React.FC = () => {
  const data = window.pdfibDashboardData;

  if (!data) {
    return (
      <div style={{ background: 'red', color: 'white', padding: '20px', fontSize: '18px' }}>
        ERREUR: window.pdfibDashboardData est undefined.
      </div>
    );
  }

  const { stats, pluginVersion, date, urls, i18n } = data;

  return (
    <div className="wrap">
      <div className="pdfb-pdf-builder-dashboard">

        {/* Header */}
        <div className="pdfb-dashboard-header">
          <h1>Advanced PDF Invoice Builder</h1>
          <p className="pdfb-dashboard-subtitle">{i18n.subtitle}</p>
          <div className="pdfb-dashboard-meta">
            <span className="pdfb-version-info">
              {i18n.version.replace('%s', pluginVersion)}
            </span>
            <span className="pdfb-last-update">
              {i18n.lastUpdate.replace('%s', date)}
            </span>
          </div>
        </div>

        {/* Stats */}
        <div className="pdfb-dashboard-stats">
          <StatCard value={stats.templates} label={i18n.statTemplates} />
          <StatCard value={stats.documents} label={i18n.statDocuments} />
          <StatCard value={stats.today} label={i18n.statToday} />
        </div>

        {/* Action cards */}
        <div className="pdfb-dashboard-actions">
          <div className="pdfb-action-card pdfb-primary">
            <h3>{i18n.createPdf}</h3>
            <p>{i18n.createPdfDesc}</p>
            <a href={urls.reactEditor} className="button button-primary">
              {i18n.openEditor}
            </a>
          </div>
          <div className="pdfb-action-card">
            <h3>{i18n.manageTemplates}</h3>
            <p>{i18n.manageTemplatesDesc}</p>
            <a href={urls.templates} className="button button-secondary">
              {i18n.viewTemplates}
            </a>
          </div>
          <div className="pdfb-action-card">
            <h3>{i18n.settingsConfig}</h3>
            <p>{i18n.settingsDesc}</p>
            <a href={urls.settings} className="button button-secondary">
              {i18n.openSettings}
            </a>
          </div>
        </div>

        {/* Quick-start guide */}
        <div className="pdfb-dashboard-guide">
          <h3>{i18n.guideTitle}</h3>
          <div className="pdfb-guide-steps">
            {i18n.steps.map((step, idx) => (
              <GuideStep
                key={idx}
                number={idx + 1}
                title={step.title}
                desc={step.desc}
                hint={step.hint}
                url={step.url}
              />
            ))}
          </div>
        </div>

      </div>
    </div>
  );
};

export default DashboardPageFree;