import { AppLayout } from '@/Components/Layout/AppLayout';

type ExportItem = {
  title: string;
  description: string;
  csvHref: string;
  xlsxHref?: string | null;
};

type Props = {
  exports: ExportItem[];
};

export default function ExportCenter({ exports }: Props) {
  return (
    <AppLayout title="مرکز خروجی">
      <div className="page-stack">
        <div className="section-header">
          <div>
            <h2 className="section-title">مرکز خروجی</h2>
            <p style={{ margin: 0, color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>
              داده‌های مدرسه را در فرمت CSV یا Excel دانلود کنید
            </p>
          </div>
        </div>

        {/* Full school ZIP export */}
        <section
          className="panel-card"
          style={{
            background: 'linear-gradient(135deg, var(--color-primary-soft-2), var(--color-accent-soft))',
            border: '1px solid var(--color-primary-soft)',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
            <span className="icon-badge" style={{ flexShrink: 0 }}>
              <i className="bi bi-archive" />
            </span>
            <div style={{ flex: 1 }}>
              <strong style={{ fontSize: '1rem' }}>خروجی کامل مدرسه (ZIP)</strong>
              <p style={{ margin: '0.25rem 0 0', fontSize: '0.875rem', color: 'var(--color-text-muted)' }}>
                همه داده‌ها شامل دانش‌آموزان، معلمان، کاربران، حضور/غیاب و نمرات در یک فایل ZIP.
              </p>
            </div>
            <a
              className="btn btn-primary"
              href="/school/exports/school.zip"
              style={{ flexShrink: 0 }}
            >
              <i className="bi bi-file-earmark-zip" /> دانلود ZIP
            </a>
          </div>
        </section>

        <div className="card-grid">
          {exports.map((item) => (
            <article className="panel-card" key={item.title} style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
              <span className="icon-badge"><i className="bi bi-file-earmark-spreadsheet" /></span>
              <h3 style={{ margin: 0 }}>{item.title}</h3>
              <p style={{ margin: 0, color: 'var(--color-text-muted)', fontSize: '0.9rem', flex: 1 }}>{item.description}</p>
              <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                <a className="btn btn-soft btn-sm" href={item.csvHref}>
                  <i className="bi bi-filetype-csv" /> CSV
                </a>
                {item.xlsxHref && (
                  <a className="btn btn-primary btn-sm" href={item.xlsxHref}>
                    <i className="bi bi-filetype-xlsx" /> Excel
                  </a>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
    </AppLayout>
  );
}