import type { CSSProperties } from 'react';

// ── Base shimmer block ────────────────────────────────────────

interface SkelProps {
  w?: string | number;
  h?: number;
  r?: number;
  mb?: number;
  style?: CSSProperties;
}
export function Skel({ w = '100%', h = 14, r = 4, mb = 0, style }: SkelProps) {
  return (
    <div
      className="aai-skel"
      style={{
        width:        typeof w === 'number' ? `${w}px` : w,
        height:       h,
        borderRadius: r,
        marginBottom: mb || undefined,
        ...style,
      }}
    />
  );
}

// ── Dashboard skeleton ────────────────────────────────────────

export function DashboardSkeleton() {
  return (
    <div className="aai-dashboard">
      <div className="aai-stats-row">
        {[0, 1, 2, 3].map((i) => (
          <div key={i} className="aai-stat-card">
            <Skel w={52} h={32} r={6} mb={10} />
            <Skel w="70%" h={13} />
          </div>
        ))}
      </div>
      <PageScannerSkeleton />
    </div>
  );
}

// ── PageScanner skeleton ──────────────────────────────────────

export function PageScannerSkeleton() {
  return (
    <div className="aai-page-scanner">
      <div className="aai-page-scanner__header">
        <div>
          <Skel w={160} h={22} mb={8} />
          <Skel w={220} h={14} />
        </div>
        <Skel w={200} h={36} r={6} />
      </div>

      <Skel w={164} h={34} r={6} style={{ margin: '12px 0' }} />

      <div className="aai-scan-table-wrap">
        <table className="aai-scan-table">
          <thead>
            <tr>
              {['Page / Post', 'Type', 'Score', 'Issues', 'Last Scanned', ''].map((h, i) => (
                <th key={i}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {[0, 1, 2, 3, 4, 5].map((i) => (
              <tr key={i}>
                <td>
                  <Skel w="80%" h={14} mb={6} />
                  <Skel w="55%" h={11} />
                </td>
                <td><Skel w={60} h={22} r={10} /></td>
                <td><Skel w={44} h={14} /></td>
                <td><Skel w={24} h={14} /></td>
                <td><Skel w={80} h={14} /></td>
                <td><Skel w={72} h={28} r={6} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Report skeleton ───────────────────────────────────────────

export function ReportSkeleton() {
  return (
    <div className="aai-report">
      <div className="aai-audit-header">
        <div className="aai-audit-header-left">
          <Skel w={280} h={22} mb={8} />
          <Skel w={140} h={14} />
        </div>
      </div>

      <Skel h={44} r={6} style={{ margin: '12px 0' }} />
      <Skel h={38} r={6} style={{ marginBottom: 16 }} />

      <div className="aai-audit-summary">
        {[0, 1, 2, 3, 4].map((i) => (
          <div key={i} className="aai-audit-summary-stat">
            <Skel w={52} h={28} r={6} style={{ margin: '0 auto 6px' }} />
            <Skel w="75%" h={12} style={{ margin: '0 auto' }} />
          </div>
        ))}
      </div>

      <div className="aai-audit-toolbar" style={{ marginTop: 16 }}>
        <Skel w={220} h={34} r={6} />
        <div style={{ display: 'flex', gap: 8 }}>
          <Skel w={110} h={34} r={6} />
          <Skel w={100} h={34} r={6} />
        </div>
      </div>

      <div className="aai-audit-table-wrap" style={{ marginTop: 16 }}>
        <table className="aai-audit-table">
          <thead>
            <tr>
              {['#', 'Page URL', 'Grade', 'Score', 'Issues', 'Last Scanned', ''].map((col, i) => (
                <th key={i} className="aai-audit-th">{col}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {[0, 1, 2, 3, 4].map((i) => (
              <tr key={i} className="aai-audit-row">
                <td className="aai-audit-td aai-audit-td--num">{i + 1}</td>
                <td className="aai-audit-td">
                  <Skel w="65%" h={14} mb={6} />
                  <Skel w="88%" h={11} />
                </td>
                <td className="aai-audit-td"><Skel w={34} h={22} r={4} /></td>
                <td className="aai-audit-td"><Skel w={30} h={14} /></td>
                <td className="aai-audit-td"><Skel w={22} h={14} /></td>
                <td className="aai-audit-td"><Skel w={90} h={14} /></td>
                <td className="aai-audit-td"><Skel w={52} h={28} r={6} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Settings skeleton ─────────────────────────────────────────

export function SettingsSkeleton() {
  return (
    <div className="aai-settings">
      <Skel w={100} h={24} mb={24} />

      <div className="aai-settings__section">
        <Skel w={110} h={18} mb={10} />
        <Skel w="85%" h={14} mb={16} />
        {[0, 1, 2, 3, 4].map((i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <Skel w={16} h={16} r={50} />
            <Skel w={170} h={14} />
          </div>
        ))}
      </div>

      <div className="aai-settings__section">
        <Skel w={140} h={18} mb={12} />
        <Skel w={200} h={34} r={6} />
      </div>

      <div className="aai-settings__save-row" style={{ marginTop: 24 }}>
        <Skel w={130} h={38} r={6} />
      </div>
    </div>
  );
}

// ── Widget configurator skeleton ──────────────────────────────

export function WidgetSkeleton() {
  return (
    <div className="aai-widget-config">
      <Skel w={200} h={24} mb={8} />
      <Skel w={280} h={14} mb={24} />

      <div className="aai-widget-config__body">
        <section className="aai-widget-config__controls">
          {[0, 1, 2].map((i) => (
            <div key={i} className="aai-field" style={{ marginBottom: 16 }}>
              <Skel w={100} h={13} mb={6} />
              <Skel w="100%" h={34} r={6} />
            </div>
          ))}
          <div style={{ marginBottom: 16 }}>
            <Skel w={80} h={13} mb={10} />
            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <Skel w={16} h={16} r={3} />
                <Skel w={120} h={13} />
              </div>
            ))}
          </div>
          <Skel w={150} h={38} r={6} />
        </section>

        <section className="aai-widget-config__preview">
          <Skel w={100} h={18} mb={12} />
          <Skel w="100%" h={520} r={8} />
        </section>
      </div>
    </div>
  );
}