import React from 'react';
import { Link } from 'react-router';
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
import BackButton from './BackButton';
import TourButton from './TourButton';

interface Crumb {
  label: string;
  to?: string;
}

interface Props {
  title: string;
  breadcrumbs?: Crumb[];
  action?: React.ReactNode;
  description?: string;
  /**
   * صفحه از دل صفحهٔ دیگری باز می‌شود → دکمهٔ «بازگشت» بالای عنوان.
   * مقدار، مقصدِ fallback است وقتی تاریخچه‌ای برای برگشتن نیست.
   */
  backTo?: string;
  /** شناسهٔ تور راهنمای این صفحه؛ اگر در registry ثبت نشده باشد دکمه‌ای نمی‌آید. */
  tourId?: string;
}

export default function PageHeader({ title, breadcrumbs, action, description, backTo, tourId }: Props) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, marginBottom: 24 }}>
      <div style={{ minWidth: 0 }}>
        {backTo && (
          <div style={{ marginBottom: 10 }}>
            <BackButton fallback={backTo} />
          </div>
        )}
        {breadcrumbs && breadcrumbs.length > 0 && (
          <nav style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 6, fontSize: 12, color: 'var(--text-3)' }}>
            {breadcrumbs.map((crumb, i) => (
              <React.Fragment key={i}>
                {i > 0 && <ChevronLeftIcon style={{ width: 12, height: 12 }} />}
                {crumb.to ? (
                  <Link to={crumb.to} style={{ color: 'var(--text-3)', textDecoration: 'none' }}
                    onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--primary)')}
                    onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-3)')}
                  >
                    {crumb.label}
                  </Link>
                ) : (
                  <span style={{ color: 'var(--text)', fontWeight: 600 }}>{crumb.label}</span>
                )}
              </React.Fragment>
            ))}
          </nav>
        )}
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <h1 className="section-title">{title}</h1>
          <TourButton tourId={tourId} />
        </div>
        {description && (
          <p style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 4 }}>{description}</p>
        )}
      </div>
      {action && <div style={{ flexShrink: 0 }}>{action}</div>}
    </div>
  );
}