// =============================================================
// Header.jsx — ヘッダ（権限切り替え・データクリア）
// =============================================================

const Header = ({ role, onRoleChange }) => {
  const { useState } = React;
  const { User, Shield, Trash2, AlertTriangle } = window.LucideReact || {};

  const [showClear, setShowClear] = useState(false);

  const handleClear = () => {
    window.StorageUtils.clear();
    setShowClear(false);
    window.location.reload();
  };

  return (
    <>
      {/* ─── ヘッダ本体 ─── */}
      <header className="fixed top-0 inset-x-0 z-50 h-14 bg-indigo-950 flex items-center px-3 gap-3 shadow-lg">

        {/* ロゴ + タイトル */}
        <div className="flex items-center gap-2 mr-auto select-none">
          <div className="w-7 h-7 rounded-lg bg-indigo-400 flex items-center justify-center text-indigo-950 font-black text-[11px] tracking-tight leading-none flex-shrink-0">
            FS
          </div>
          <span className="text-white font-semibold text-sm tracking-wide leading-none hidden sm:block">
            現場チェック管理システム
          </span>
          <span className="text-white font-semibold text-sm leading-none sm:hidden">
            FSI チェック
          </span>
        </div>

        {/* ─── 権限切り替えトグル ─── */}
        <div className="flex items-center bg-indigo-900/70 rounded-xl p-0.5 gap-0.5">
          <button
            onClick={() => onRoleChange('field')}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-[10px] text-xs font-semibold transition-all duration-150 ${
              role === 'field'
                ? 'bg-white text-indigo-900 shadow-sm'
                : 'text-indigo-300 hover:text-white'
            }`}
          >
            <User size={12} strokeWidth={2.5} />
            <span>現場担当者</span>
          </button>
          <button
            onClick={() => onRoleChange('admin')}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-[10px] text-xs font-semibold transition-all duration-150 ${
              role === 'admin'
                ? 'bg-white text-indigo-900 shadow-sm'
                : 'text-indigo-300 hover:text-white'
            }`}
          >
            <Shield size={12} strokeWidth={2.5} />
            <span>管理者</span>
          </button>
        </div>

        {/* ─── データクリアボタン ─── */}
        <button
          onClick={() => setShowClear(true)}
          title="LocalStorage データをリセット"
          className="flex items-center gap-1.5 px-2.5 py-1.5 bg-red-900/80 hover:bg-red-800 text-red-200 rounded-xl text-xs font-semibold transition-colors"
        >
          <Trash2 size={13} strokeWidth={2.5} />
          <span className="hidden sm:inline">データクリア</span>
        </button>
      </header>

      {/* ─── クリア確認モーダル ─── */}
      {showClear && (
        <div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
          <div
            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
            onClick={() => setShowClear(false)}
          />
          <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6">
            <div className="flex items-start gap-3 mb-1">
              <div className="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mt-0.5">
                <AlertTriangle size={20} className="text-red-600" />
              </div>
              <div>
                <p className="font-bold text-slate-800 text-[15px]">データをリセットしますか？</p>
                <p className="text-xs text-slate-500 mt-1.5 leading-relaxed">
                  LocalStorage のすべてのデータを削除し、初期サンプルデータで再生成します。この操作は取り消せません。
                </p>
              </div>
            </div>
            <div className="flex gap-2 mt-5">
              <button
                onClick={() => setShowClear(false)}
                className="flex-1 py-2.5 border border-slate-200 rounded-xl text-sm font-medium text-slate-600 hover:bg-slate-50 transition-colors"
              >
                キャンセル
              </button>
              <button
                onClick={handleClear}
                className="flex-1 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold transition-colors"
              >
                リセットする
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

Object.assign(window, { Header });