"use client";

import type { ViewMode } from "./useViewMode";

interface Props {
  viewMode: ViewMode;
  onModeChange: (m: ViewMode) => void;
  hasExecutiveBrief: boolean;
  fullSectionCount: number;
}

export function ViewModeToggle({ viewMode, onModeChange, hasExecutiveBrief, fullSectionCount }: Props) {
  if (!hasExecutiveBrief) return null;

  return (
    <div className="flex flex-wrap items-center justify-between gap-3 bg-white border border-slate-200 rounded-xl px-4 py-3 shadow-sm">
      <div className="flex items-center gap-1 bg-slate-100 rounded-lg p-1">
        <button
          onClick={() => onModeChange("executive")}
          className={`px-3 py-1.5 text-sm font-medium rounded-md transition-all ${
            viewMode === "executive"
              ? "bg-white text-slate-900 shadow-sm"
              : "text-slate-500 hover:text-slate-700"
          }`}
        >
          Executive View
        </button>
        <button
          onClick={() => onModeChange("full")}
          className={`px-3 py-1.5 text-sm font-medium rounded-md transition-all flex items-center gap-1.5 ${
            viewMode === "full"
              ? "bg-white text-slate-900 shadow-sm"
              : "text-slate-500 hover:text-slate-700"
          }`}
        >
          Full Audit
          <span className="text-[10px] font-medium text-slate-400 bg-slate-200 px-1.5 py-0.5 rounded-full">
            {fullSectionCount}
          </span>
        </button>
      </div>

      <p className="text-xs text-slate-400 hidden sm:block">
        {viewMode === "executive"
          ? "Strategic overview — 5 sections optimized for executive review"
          : `Complete analysis — all ${fullSectionCount} sections with implementation detail`
        }
      </p>

      {/* Mobile dropdown fallback */}
      <div className="sm:hidden w-full">
        <select
          value={viewMode}
          onChange={(e) => onModeChange(e.target.value as ViewMode)}
          className="w-full text-sm border border-slate-200 rounded-lg px-3 py-2 bg-white text-slate-700"
        >
          <option value="executive">Executive View</option>
          <option value="full">Full Audit ({fullSectionCount} sections)</option>
        </select>
      </div>
    </div>
  );
}
