import React from 'react';

import { getCurrentWeekIso, getVisibilityWeeks, labelForWeek } from './helpers';

interface VisibilityHeaderProps {
  brandName: string;
  weekIso: string;
  onWeekChange: (weekIso: string) => void;
  scanning: boolean;
  onForceScan: () => void;
  onRefresh: () => void;
  loading: boolean;
  onOpenSettings: () => void;
  requiresSetup: boolean;
}

/**
 * Sticky-ish header for the AI Visibility page: brand name, ISO-week
 * picker, and the primary "Force scan now" action.
 */
const VisibilityHeader = ({
  brandName,
  weekIso,
  onWeekChange,
  scanning,
  onForceScan,
  onRefresh,
  loading,
  onOpenSettings,
  requiresSetup,
}: VisibilityHeaderProps): JSX.Element => {
  const currentWeek = getCurrentWeekIso();
  const weekOptions = getVisibilityWeeks().map(w => ({
    label: labelForWeek(w, w === currentWeek),
    value: w,
  }));

  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <h1 className="text-2xl font-bold text-gray-900">{brandName}</h1>
        <div className="flex items-center gap-2 flex-wrap">
          <label className="inline-flex items-center gap-2 text-sm text-gray-700">
            <span className="text-sm text-gray-700">Week</span>
            <select
              value={weekIso}
              onChange={e => onWeekChange(e.target.value)}
              className="rounded-md border border-gray-300 bg-white px-2 py-1.5 text-sm"
            >
              {weekOptions.map(option => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </label>
          <button
            type="button"
            onClick={onRefresh}
            disabled={loading}
            aria-label="Refresh"
            className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className={loading ? 'animate-spin' : ''}
            >
              <path d="M21 2v6h-6" />
              <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
              <path d="M3 22v-6h6" />
              <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
            </svg>
          </button>
          <button
            type="button"
            onClick={onOpenSettings}
            className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
          >
            Settings
          </button>
          <button
            type="button"
            onClick={requiresSetup ? onOpenSettings : onForceScan}
            disabled={requiresSetup || scanning}
            aria-label={
              requiresSetup
                ? 'Set brand language and country before scanning'
                : 'Force scan now'
            }
            className="inline-flex items-center justify-center rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-700 disabled:opacity-60 disabled:cursor-not-allowed"
          >
            {scanning && (
              <span className="mr-2 inline-block h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent" />
            )}
            {requiresSetup ? 'Set language & country' : 'Force scan now'}
          </button>
        </div>
      </div>
    </div>
  );
};

export default VisibilityHeader;