import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, doc, setDoc, updateDoc, onSnapshot, deleteDoc, serverTimestamp, getDoc } from 'firebase/firestore';
import { 
  LayoutDashboard, Layers, AlertTriangle, GitCompare, UserCheck, Settings, 
  Plus, ChevronRight, ChevronDown, CheckCircle, Lightbulb, Loader2, ArrowRight, Save,
  Trash2, ArrowUp, ArrowDown, Sparkles, Building2, CheckSquare, UploadCloud, FileText, Check
} from 'lucide-react';

// ==========================================
// Firebase Setup & Config
// ==========================================
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'jobjoin-mvp-app';

// ==========================================
// Gemini API Setup
// ==========================================
const apiKey = ""; // Provided by execution environment

// 新機能: 初期テンプレートの生成 (既存データの読み込み対応)
const generateTemplateJSON = async (profile, existingDataText) => {
  const prompt = `あなたはBtoB SaaS「JOBJOIN」の優秀な組織コンサルタントAIです。
以下の企業プロファイル情報${existingDataText ? 'および提供された既存の業務データ' : ''}をもとに、指定された「ターゲット役割（職種）」が通常行う一般的な業務プロセスとタスクの構造（叩き台）を作成してください。

企業サービス: ${profile.service}
ターゲット役割: ${profile.targetRole}
${existingDataText ? `\n【既存の業務データ（参考・ベース）】\n${existingDataText}\n\n※上記のデータを最優先に考慮し、表記揺れの修正、大項目（プロセス）と小項目（タスク）の階層化、不足分の補完を行いつつ綺麗な構造に整理してください。\n` : ''}

以下の要件を満たしたJSON形式のみを出力してください。バッククォート(\`\`\`)などのマークダウン記法は絶対に含めず、純粋なJSON文字列のみを返してください。
- processes: 業務プロセス（大項目）を3〜7個程度
- tasks: 各プロセスに紐づく具体的なタスク（小項目）を3〜7個程度

【出力JSONフォーマット】
{
  "processes": [
    {
      "name": "プロセス名（例: 初回ヒアリング・与件整理）",
      "tasks": ["タスク名1", "タスク名2", "タスク名3"]
    }
  ]
}`;

  try {
    const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        contents: [{ parts: [{ text: prompt }] }],
      })
    });
    const result = await fetchWithRetry(response);
    const text = result.candidates?.[0]?.content?.parts?.[0]?.text || "";
    // Remove potential markdown code blocks
    const cleanJsonText = text.replace(/```json/g, '').replace(/```/g, '').trim();
    return JSON.parse(cleanJsonText);
  } catch (error) {
    console.error("Template generation error:", error);
    return null;
  }
};

const generateTaskSuggestions = async (processName, existingTasks) => {
  const existingText = existingTasks.map(t => t.name).join('\n');
  const prompt = `あなたはBtoB SaaS「JOBJOIN」の優秀な組織コンサルタントAIです。
業務プロセス「${processName}」において、現在以下のタスクが登録されています。
${existingText || "(まだタスクはありません)"}

このプロセスの文脈を踏まえ、次に続くべき、または不足している具体的なタスクの候補を3〜5個提案してください。
返答は提案するタスク名のみを改行区切りで出力してください。箇条書きの記号（- や ・ など）は不要です。余計な説明も不要です。`;

  try {
    const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        contents: [{ parts: [{ text: prompt }] }],
      })
    });
    const result = await fetchWithRetry(response);
    const text = result.candidates?.[0]?.content?.parts?.[0]?.text || "";
    return text.split('\n').map(s => s.trim().replace(/^[-・*]\s*/, '')).filter(s => s.length > 0).slice(0, 5);
  } catch (error) {
    console.error("Task suggestion error:", error);
    return ["タスク候補を生成できませんでした（エラー）"];
  }
};

const generateAIHint = async (taskName, bottleneckReason, stepId) => {
  const stepPrompts = {
    'sort': 'このタスクを「無くす」「ツールで自動化する」ためのアイデアや問いかけを2〜3行で出してください。',
    'reassign': 'このタスクを「社内の別の担当者・部署に任せる」ための基準や問いかけを2〜3行で出してください。',
    'outsource': 'このタスクを「外部委託（BPOなど）する」際のメリット・デメリットや検討ポイントを2〜3行で出してください。',
    'train': 'このタスクを「既存社員を育成して任せる」ための教育ステップのヒントを2〜3行で出してください。',
    'recruit': '最終手段として「採用する」場合、どのようなスキル要件を絶対に外せないか、問いかけを2〜3行で出してください。'
  };

  const prompt = `あなたはBtoB SaaS「JOBJOIN」の優秀な組織コンサルタントAIです。
以下のボトルネックタスクについて、打ち手を検討しています。
タスク名: ${taskName}
ボトルネックの理由: ${bottleneckReason}
指示: ${stepPrompts[stepId]}
簡潔に、実務的でコンサルティング感のあるトーンで答えてください。`;

  try {
    const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        contents: [{ parts: [{ text: prompt }] }],
        systemInstruction: { parts: [{ text: "BtoB SaaSのプロフェッショナルコンサルタントとして振る舞ってください。" }] }
      })
    });
    const result = await fetchWithRetry(response);
    return result.candidates?.[0]?.content?.parts?.[0]?.text || "ヒントを生成できませんでした。";
  } catch (error) {
    console.error("AI hint error:", error);
    return "AIの呼び出し中にエラーが発生しました。";
  }
};

const fetchWithRetry = async (response, retries = 3) => {
    if (response.ok) return response.json();
    if (retries > 0) {
        await new Promise(r => setTimeout(r, 1000));
        return fetchWithRetry(response, retries - 1);
    }
    throw new Error('API request failed');
};


// ==========================================
// Main Application Component
// ==========================================
export default function App() {
  const [user, setUser] = useState(null);
  const [authLoading, setAuthLoading] = useState(true);

  // Firestore Data State
  const [profile, setProfile] = useState(null);
  const [processes, setProcesses] = useState([]);
  const [tasks, setTasks] = useState([]);
  const [bottlenecks, setBottlenecks] = useState([]);
  const [decisions, setDecisions] = useState([]);

  // UI State
  const [currentPath, setCurrentPath] = useState('loading'); // loading, setup, dashboard, analysis...
  const [isInitializing, setIsInitializing] = useState(true);

  // Initialize Auth
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (error) {
        console.error("Auth init error:", error);
      }
    };
    initAuth();

    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
      setAuthLoading(false);
    });
    return () => unsubscribe();
  }, []);

  // Fetch Data & Profile
  useEffect(() => {
    if (!user) return;
    
    const fetchProfile = async () => {
      const docRef = doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'profile');
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        setProfile(docSnap.data());
        setCurrentPath('dashboard');
      } else {
        setCurrentPath('setup'); // Profile doesn't exist, go to setup
      }
      setIsInitializing(false);
    };

    fetchProfile();
    
    const uPath = (col) => collection(db, 'artifacts', appId, 'users', user.uid, col);
    
    const unsubs = [
      onSnapshot(uPath('processes'), (s) => setProcesses(s.docs.map(d => ({ id: d.id, ...d.data() }))), console.error),
      onSnapshot(uPath('tasks'), (s) => setTasks(s.docs.map(d => ({ id: d.id, ...d.data() }))), console.error),
      onSnapshot(uPath('bottlenecks'), (s) => setBottlenecks(s.docs.map(d => ({ id: d.id, ...d.data() }))), console.error),
      onSnapshot(uPath('decisions'), (s) => setDecisions(s.docs.map(d => ({ id: d.id, ...d.data() }))), console.error),
    ];

    return () => unsubs.forEach(unsub => unsub());
  }, [user]);

  if (authLoading || isInitializing) {
    return <div className="flex h-screen items-center justify-center text-slate-500"><Loader2 className="w-8 h-8 animate-spin" /></div>;
  }

  return (
    <div className="flex h-screen bg-slate-50 text-slate-900 font-sans overflow-hidden">
      <Sidebar currentPath={currentPath} setCurrentPath={setCurrentPath} />
      
      <div className="flex-1 flex flex-col h-full overflow-hidden">
        <Header user={user} profile={profile} />
        <StepNavigation currentPath={currentPath} />
        
        <main className="flex-1 overflow-y-auto p-8">
          <div className="max-w-5xl mx-auto">
            {currentPath === 'setup' && <SetupView user={user} profile={profile} onComplete={() => setCurrentPath('dashboard')} />}
            {currentPath === 'dashboard' && <DashboardView user={user} profile={profile} processes={processes} tasks={tasks} bottlenecks={bottlenecks} decisions={decisions} setCurrentPath={setCurrentPath} />}
            {currentPath === 'analysis' && <AnalysisView user={user} processes={processes} tasks={tasks} />}
            {currentPath === 'bottleneck' && <BottleneckView user={user} processes={processes} tasks={tasks} bottlenecks={bottlenecks} setCurrentPath={setCurrentPath} />}
            {currentPath === 'decision' && <DecisionView user={user} tasks={tasks} bottlenecks={bottlenecks} decisions={decisions} />}
            {currentPath === 'capability' && <CapabilityView user={user} decisions={decisions} bottlenecks={bottlenecks} tasks={tasks} />}
          </div>
        </main>
      </div>
    </div>
  );
}

// ==========================================
// Views & Layouts
// ==========================================

// --- 新規: 0. 初期セットアップ (SetupView) ---
const SetupView = ({ user, profile, onComplete }) => {
  const [formData, setFormData] = useState({
    companyName: profile?.companyName || '',
    service: profile?.service || '',
    scale: profile?.scale || '',
    issues: profile?.issues || '',
    hasEvaluation: profile?.hasEvaluation || 'no',
    targetRole: profile?.targetRole || ''
  });
  const [generateTemplate, setGenerateTemplate] = useState(!profile); // プロファイルがない初回は自動チェック
  const [existingDataText, setExistingDataText] = useState(''); // 既存データのテキスト
  const [isGenerating, setIsGenerating] = useState(false);
  const [genStatus, setGenStatus] = useState('');
  const fileInputRef = React.useRef(null);

  const handleChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (event) => {
      setExistingDataText(prev => prev + (prev ? '\n\n' : '') + event.target.result);
    };
    reader.readAsText(file); // CSVやTXTファイルのテキスト内容を読み込む
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.companyName || !formData.targetRole) return;

    setIsGenerating(true);
    
    // 1. プロファイルを保存
    setGenStatus('企業プロファイルを保存中...');
    const profileRef = doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'profile');
    await setDoc(profileRef, { ...formData, updatedAt: serverTimestamp() }, { merge: true });

    // 2. AIによる業務叩き台の生成 (チェックがある場合のみ)
    if (generateTemplate) {
      setGenStatus(`${formData.targetRole} の業務・タスクを自動生成中（AIが既存データ等を分析しています）...`);
      const templateData = await generateTemplateJSON(formData, existingDataText);

      if (templateData && templateData.processes) {
        setGenStatus('生成された叩き台をデータベースにセットアップ中...');
        
        let pOrder = 0;
        // 既存の最大のorderを取得して、末尾に追加されるようにする
        const processesSnap = await getDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'profile')); // Dummy for structure, actual max order should be queried, defaulting to 100 for append
        let baseOrder = 100;

        for (const p of templateData.processes) {
          // プロセス作成
          const pRef = doc(collection(db, 'artifacts', appId, 'users', user.uid, 'processes'));
          await setDoc(pRef, { name: p.name, order: baseOrder + pOrder++, createdAt: serverTimestamp() });
          
          // タスク作成
          let tOrder = 0;
          for (const tName of p.tasks) {
            const tRef = doc(collection(db, 'artifacts', appId, 'users', user.uid, 'tasks'));
            await setDoc(tRef, { processId: pRef.id, name: tName, difficulty: 'medium', order: tOrder++, createdAt: serverTimestamp() });
          }
        }
      }
    }

    setIsGenerating(false);
    onComplete(); // 指定の画面へ
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mb-8">
      <div className="p-8 border-b border-slate-100">
        <h2 className="text-2xl font-bold text-slate-800 tracking-tight">企業プロファイル & AI初期セットアップ</h2>
        <p className="text-sm text-slate-500 mt-2">
          組織情報とファーストレビュー対象の役割を設定します。ここからAIに業務の叩き台を追加生成させることも可能です。
        </p>
      </div>

      <div className="p-8">
        {isGenerating ? (
          <div className="py-16 flex flex-col items-center justify-center text-center animate-in fade-in zoom-in duration-500">
            <div className="relative">
              <div className="absolute inset-0 rounded-full blur-xl bg-[#4cb3d4] opacity-20 animate-pulse"></div>
              <Building2 className="w-16 h-16 text-[#1a365d] relative z-10 animate-bounce" />
            </div>
            <h3 className="mt-6 text-xl font-bold text-slate-800">オンボーディング構築中</h3>
            <p className="mt-2 text-sm text-slate-500 font-medium">{genStatus}</p>
            <div className="mt-8 w-64 h-2 bg-slate-100 rounded-full overflow-hidden">
              <div className="h-full bg-gradient-to-r from-[#1a365d] to-[#4cb3d4] animate-[shimmer_1.5s_infinite] w-1/2"></div>
            </div>
          </div>
        ) : (
          <form className="space-y-6" onSubmit={handleSubmit}>
            <div className="grid grid-cols-2 gap-6">
              <div className="col-span-2">
                <label className="block text-sm font-medium text-slate-700">企業名 <span className="text-red-500">*</span></label>
                <input required name="companyName" value={formData.companyName} onChange={handleChange} className="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#4cb3d4] focus:border-[#4cb3d4] sm:text-sm" placeholder="株式会社Onefamily" />
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700">主なサービス・事業</label>
                <input name="service" value={formData.service} onChange={handleChange} className="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#4cb3d4] focus:border-[#4cb3d4] sm:text-sm" placeholder="例: 木造注文住宅の設計・施工" />
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700">従業員規模</label>
                <select name="scale" value={formData.scale} onChange={handleChange} className="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#4cb3d4] focus:border-[#4cb3d4] sm:text-sm bg-white">
                  <option value="">選択してください</option>
                  <option value="1-10">1〜10名</option>
                  <option value="11-50">11〜50名</option>
                  <option value="51-100">51〜100名</option>
                  <option value="101-">101名以上</option>
                </select>
              </div>
              <div className="col-span-2">
                <label className="block text-sm font-medium text-slate-700">現在の人材・組織課題</label>
                <textarea name="issues" value={formData.issues} onChange={handleChange} rows={2} className="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#4cb3d4] focus:border-[#4cb3d4] sm:text-sm" placeholder="例: ベテランに業務が偏っている、若手が育たない等" />
              </div>
            </div>

            <div className="pt-6 border-t border-slate-200">
              <div className="bg-[#4cb3d4]/10 border border-[#4cb3d4]/30 rounded-lg p-5">
                <h4 className="text-sm font-bold text-[#1a365d] mb-1 flex items-center">
                  <Sparkles className="w-4 h-4 mr-1 text-[#4cb3d4]" />
                  AIによる「業務の叩き台」生成
                </h4>
                <p className="text-xs text-slate-600 mb-4">
                  対象とする「役割・職種」を入力してください。チェックを入れると、AIが一般的な業務とタスクを自動生成し、現在のリストに追加します。
                </p>
                <div>
                  <label className="block text-sm font-bold text-[#1a365d]">対象とする役割・職種 <span className="text-red-500">*</span></label>
                  <input required name="targetRole" value={formData.targetRole} onChange={handleChange} className="mt-1 block w-full border border-[#4cb3d4]/40 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#4cb3d4] focus:border-[#4cb3d4] sm:text-sm bg-white" placeholder="例: 工務店の店舗設計・デザイン担当、営業担当 など" />
                </div>
                
                {/* 新規追加: 既存データの読み込み */}
                <div className="mt-6 p-4 bg-white rounded border border-[#4cb3d4]/20">
                  <label className="block text-sm font-bold text-slate-700 mb-1 flex items-center">
                    <FileText className="w-4 h-4 mr-1 text-slate-500" /> 既存の業務データからAIに整理させる (任意)
                  </label>
                  <p className="text-xs text-slate-500 mb-3">
                    お客様がすでにお持ちのPDFやスプレッドシートの業務一覧があれば、テキストをコピーして貼り付けてください。箇条書きがバラバラでもAIが綺麗に構造化します。
                  </p>
                  <textarea 
                    value={existingDataText}
                    onChange={(e) => setExistingDataText(e.target.value)}
                    rows={4} 
                    className="w-full border border-slate-300 rounded p-3 text-sm focus:ring-[#4cb3d4] focus:border-[#4cb3d4] mb-2"
                    placeholder="例:&#13;&#10;・お客様へのヒアリング&#13;&#10;・見積書作成&#13;&#10;・契約の締結..."
                  />
                  <div className="flex items-center justify-between">
                    <input 
                      type="file" 
                      accept=".csv,.txt" 
                      ref={fileInputRef} 
                      className="hidden" 
                      onChange={handleFileUpload} 
                    />
                    <button 
                      type="button" 
                      onClick={() => fileInputRef.current?.click()} 
                      className="flex items-center text-xs font-medium text-slate-600 bg-slate-100 hover:bg-slate-200 px-3 py-1.5 rounded transition-colors"
                    >
                      <UploadCloud className="w-4 h-4 mr-1" /> CSV/TXTファイルから読み込む
                    </button>
                    <span className="text-[10px] text-slate-400">※機密情報の入力にはご注意ください</span>
                  </div>
                </div>

                <div className="mt-6 flex items-center">
                  <input 
                    type="checkbox" 
                    id="generateTemplate" 
                    checked={generateTemplate} 
                    onChange={(e) => setGenerateTemplate(e.target.checked)}
                    className="h-4 w-4 text-[#1a365d] focus:ring-[#4cb3d4] border-slate-300 rounded"
                  />
                  <label htmlFor="generateTemplate" className="ml-2 block text-sm font-bold text-slate-800 cursor-pointer">
                    入力内容を元にAIで「業務の叩き台」を自動生成して追加する
                  </label>
                </div>
              </div>
            </div>

            <div className="pt-4 flex justify-end">
              <button type="submit" disabled={!formData.companyName || !formData.targetRole} className="flex justify-center py-3 px-8 border border-transparent rounded-md shadow-md text-sm font-bold text-white bg-[#1a365d] hover:bg-[#12284b] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#1a365d] disabled:opacity-50 transition-colors">
                {generateTemplate ? "設定を保存してAI叩き台を追加生成" : "企業プロファイルを保存する"}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
};


const Sidebar = ({ currentPath, setCurrentPath }) => {
  const navItems = [
    { id: 'dashboard', icon: LayoutDashboard, label: 'ダッシュボード' },
    { id: 'analysis', icon: Layers, label: '1. 業務分解' },
    { id: 'bottleneck', icon: AlertTriangle, label: '2. ボトルネック特定' },
    { id: 'decision', icon: GitCompare, label: '3. 打ち手比較' },
    { id: 'capability', icon: UserCheck, label: '4. 能力・ペルソナ' },
  ];

  return (
    <div className="w-64 bg-slate-900 text-slate-300 flex flex-col shadow-xl z-10">
      {/* JOBJOIN ロゴエリア (白背景) */}
      <div className="h-20 flex items-center justify-center border-b border-slate-800 bg-white">
        <div className="flex items-center transform -skew-x-6 font-black tracking-tighter">
          <span className="text-3xl text-[#1a365d]">JOB</span>
          <span className="text-3xl text-[#4cb3d4]">JOIN</span>
          <svg viewBox="0 0 24 24" className="w-7 h-7 text-[#4cb3d4] fill-current ml-0.5 -mt-2">
            <path d="M12 2 L22 12 L16 12 L16 22 L8 22 L8 12 L2 12 Z" transform="rotate(45 12 12)"/>
          </svg>
        </div>
      </div>
      <div className="flex-1 py-6">
        <div className="px-4 mb-2 text-xs font-semibold text-slate-500 uppercase tracking-wider">JOBJOINメソッド</div>
        <nav className="space-y-1">
          {navItems.map(item => (
            <button
              key={item.id}
              onClick={() => setCurrentPath(item.id)}
              className={`w-full flex items-center px-6 py-3 text-sm font-medium transition-colors ${
                currentPath === item.id 
                  ? 'bg-[#1a365d]/10 text-[#1a365d] border-r-4 border-[#1a365d] font-bold' 
                  : 'hover:bg-slate-800 hover:text-white'
              }`}
            >
              <item.icon className={`w-5 h-5 mr-3 ${currentPath === item.id ? 'text-[#1a365d]' : 'text-slate-400'}`} />
              {item.label}
            </button>
          ))}
        </nav>
      </div>
      <div className="p-4 border-t border-slate-800">
        {/* Onefamily ロゴ (提供元表示) */}
        <div className="flex items-center justify-center mb-6 opacity-60 hover:opacity-100 transition-opacity">
           <svg viewBox="0 0 100 100" className="w-6 h-6 mr-2">
              <path d="M 50 10 L 70 20 L 60 40 L 40 30 Z" fill="#e10010" />
              <path d="M 70 20 L 90 55 L 75 65 L 60 40 Z" fill="#78b729" />
              <path d="M 40 30 L 60 40 L 45 75 L 25 65 Z" fill="#008ecc" />
           </svg>
           <span className="text-sm font-bold tracking-widest text-slate-300">Onefamily</span>
        </div>
        <button onClick={() => setCurrentPath('setup')} className="flex items-center text-sm text-slate-400 hover:text-white transition-colors w-full justify-center bg-slate-800 py-2 rounded-lg">
          <Settings className="w-4 h-4 mr-2" />
          企業・AI設定
        </button>
      </div>
    </div>
  );
};

const Header = ({ user, profile }) => (
  <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-8 shadow-sm z-10">
    <h1 className="text-lg font-semibold text-slate-800">
      {profile?.companyName ? `${profile.companyName} 様` : '株式会社サンプルテナント 様'}
    </h1>
    <div className="flex items-center space-x-4">
      <div className="text-sm text-slate-500 text-right">
        <div className="font-medium text-slate-700">運用管理者</div>
        <div className="text-xs">{user?.uid.substring(0, 8)}...</div>
      </div>
      <div className="w-10 h-10 rounded-full bg-[#1a365d] flex items-center justify-center text-white font-bold shadow-sm">
        {profile?.companyName ? profile.companyName.charAt(0) : 'A'}
      </div>
    </div>
  </header>
);

const StepNavigation = ({ currentPath }) => {
  const steps = [
    { id: 'analysis', label: '業務分解' },
    { id: 'bottleneck', label: 'ボトルネック特定' },
    { id: 'decision', label: '打ち手比較' },
    { id: 'capability', label: '能力・ペルソナ' }
  ];
  
  const currentIndex = steps.findIndex(s => s.id === currentPath);
  
  // Only show step nav on method pages
  if (currentIndex === -1) return null;

  return (
    <div className="bg-white border-b border-slate-200 px-8 py-4">
      <div className="flex items-center max-w-5xl mx-auto">
        {steps.map((step, index) => {
          const isActive = index === currentIndex;
          const isPast = index < currentIndex;
          return (
            <React.Fragment key={step.id}>
              <div className={`flex items-center ${isActive ? 'text-[#1a365d] font-bold' : isPast ? 'text-slate-600' : 'text-slate-400'}`}>
                <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs mr-2 
                  ${isActive ? 'bg-[#1a365d] text-white shadow-sm' : isPast ? 'bg-slate-200 text-slate-700' : 'bg-slate-100 text-slate-400 border border-slate-200'}`}>
                  {isPast ? <CheckCircle className="w-4 h-4" /> : index + 1}
                </div>
                <span className="text-sm">{step.label}</span>
              </div>
              {index < steps.length - 1 && (
                <div className="flex-1 px-4">
                  <div className={`h-0.5 w-full ${isPast ? 'bg-[#1a365d]/30' : 'bg-slate-100'}`}></div>
                </div>
              )}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
};

// ==========================================
// Views
// ==========================================

// --- 0. ダッシュボード (DashboardView) ---
const DashboardView = ({ user, profile, processes, tasks, bottlenecks, decisions, setCurrentPath }) => {
  const highBottlenecks = bottlenecks.filter(b => b.score >= 4).length;
  const decisionCount = decisions.length;
  
  return (
    <div className="space-y-8 animate-in fade-in duration-500">
      {/* ヒーローセクション */}
      <div className="relative overflow-hidden rounded-2xl bg-white border border-slate-200 shadow-sm">
        <div className="absolute top-0 right-0 w-64 h-64 bg-[#4cb3d4] opacity-5 rounded-full -translate-y-1/2 translate-x-1/3"></div>
        <div className="absolute bottom-0 left-0 w-48 h-48 bg-[#1a365d] opacity-5 rounded-full translate-y-1/3 -translate-x-1/4"></div>
        
        <div className="p-10 relative z-10 flex flex-col md:flex-row items-center gap-8">
          <div className="flex-1">
            <h2 className="text-3xl font-bold text-[#1a365d] mb-4 leading-tight">
              採用は、最後の選択肢。<br/>
              組織の<span className="text-[#4cb3d4]">真のボトルネック</span>を特定する。
            </h2>
            <p className="text-slate-600 leading-relaxed mb-6 font-medium">
              JOBJOINは、安易な採用に頼らない強い組織作りをサポートします。<br/>
              業務を分解し、ボトルネックを特定し、<b>「整理・再配置・委託・育成」</b>の<br/>
              打ち手を比較検討した上で、本当に必要な能力・ペルソナを設計します。
            </p>
            <div className="flex gap-4">
              <button 
                onClick={() => setCurrentPath('analysis')}
                className="bg-[#1a365d] hover:bg-[#12284b] text-white px-6 py-3 rounded-lg font-bold shadow-md transition-all flex items-center gap-2"
              >
                業務分解を始める <ArrowRight className="w-5 h-5" />
              </button>
            </div>
          </div>
          
          {/* プロファイルサマリーパネル */}
          {profile && (
            <div className="hidden md:flex flex-col w-72 bg-slate-50 rounded-xl border border-slate-200 p-5 shadow-sm">
               <div className="text-sm font-bold text-slate-500 mb-3 border-b border-slate-200 pb-2 flex items-center">
                 <Building2 className="w-4 h-4 mr-1 text-[#4cb3d4]" />
                 ファーストレビュー対象
               </div>
               <div className="mb-4">
                 <div className="text-lg font-black text-[#1a365d] leading-tight">{profile.targetRole}</div>
               </div>
               <div className="space-y-2 text-xs">
                 <div className="flex justify-between"><span className="text-slate-500">登録業務(大項目):</span> <span className="font-bold text-slate-800">{processes.length} 件</span></div>
                 <div className="flex justify-between"><span className="text-slate-500">登録タスク(小項目):</span> <span className="font-bold text-slate-800">{tasks.length} 件</span></div>
               </div>
               {processes.length > 0 && (
                 <div className="mt-4 pt-3 border-t border-slate-200 flex items-center text-xs text-emerald-600 font-bold bg-emerald-50 px-3 py-2 rounded-md">
                   <CheckSquare className="w-4 h-4 mr-1" />
                   AIによる初期叩き台 生成済み
                 </div>
               )}
            </div>
          )}
        </div>
      </div>

      {/* メソッドステップの可視化 */}
      <div>
        <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center">
          <Layers className="w-5 h-5 mr-2 text-slate-500" />
          JOBJOIN メソッド・プロセス
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          
          {/* Step 1 */}
          <div onClick={() => setCurrentPath('analysis')} className="group cursor-pointer bg-white rounded-xl border border-slate-200 p-5 hover:border-[#1a365d] hover:shadow-md transition-all relative overflow-hidden">
            <div className="absolute top-0 left-0 w-1 h-full bg-[#1a365d]"></div>
            <div className="flex justify-between items-start mb-4">
              <div className="w-8 h-8 rounded bg-slate-100 text-[#1a365d] flex items-center justify-center font-bold">1</div>
              <Layers className="w-5 h-5 text-slate-400 group-hover:text-[#1a365d] transition-colors" />
            </div>
            <h4 className="font-bold text-slate-800 mb-1">業務分解</h4>
            <p className="text-xs text-slate-500 mb-4">業務を工程とタスクに分解し、現状を可視化します。</p>
            <div className="text-sm font-medium text-slate-700 bg-slate-50 inline-block px-3 py-1 rounded-full border border-slate-100">
              {processes.length} 業務 / {tasks.length} タスク
            </div>
          </div>

          {/* Step 2 */}
          <div onClick={() => setCurrentPath('bottleneck')} className="group cursor-pointer bg-white rounded-xl border border-slate-200 p-5 hover:border-red-400 hover:shadow-md transition-all relative overflow-hidden">
            <div className="absolute top-0 left-0 w-1 h-full bg-red-400"></div>
            <div className="flex justify-between items-start mb-4">
              <div className="w-8 h-8 rounded bg-slate-100 text-red-500 flex items-center justify-center font-bold">2</div>
              <AlertTriangle className="w-5 h-5 text-slate-400 group-hover:text-red-400 transition-colors" />
            </div>
            <h4 className="font-bold text-slate-800 mb-1">ボトルネック特定</h4>
            <p className="text-xs text-slate-500 mb-4">成果を阻害しているタスクとその原因を言語化します。</p>
            <div className="text-sm font-medium text-red-700 bg-red-50 inline-block px-3 py-1 rounded-full border border-red-100">
              影響度大: {highBottlenecks} 件
            </div>
          </div>

          {/* Step 3 */}
          <div onClick={() => setCurrentPath('decision')} className="group cursor-pointer bg-white rounded-xl border border-slate-200 p-5 hover:border-[#4cb3d4] hover:shadow-md transition-all relative overflow-hidden">
            <div className="absolute top-0 left-0 w-1 h-full bg-[#4cb3d4]"></div>
            <div className="flex justify-between items-start mb-4">
              <div className="w-8 h-8 rounded bg-slate-100 text-[#4cb3d4] flex items-center justify-center font-bold">3</div>
              <GitCompare className="w-5 h-5 text-slate-400 group-hover:text-[#4cb3d4] transition-colors" />
            </div>
            <h4 className="font-bold text-slate-800 mb-1">打ち手比較</h4>
            <p className="text-xs text-slate-500 mb-4">整理・再配置・委託・育成・採用の順で比較します。</p>
            <div className="text-sm font-medium text-sky-700 bg-sky-50 inline-block px-3 py-1 rounded-full border border-sky-100">
              決着済: {decisionCount} 件
            </div>
          </div>

          {/* Step 4 */}
          <div onClick={() => setCurrentPath('capability')} className="group cursor-pointer bg-white rounded-xl border border-slate-200 p-5 hover:border-indigo-400 hover:shadow-md transition-all relative overflow-hidden">
            <div className="absolute top-0 left-0 w-1 h-full bg-indigo-400"></div>
            <div className="flex justify-between items-start mb-4">
              <div className="w-8 h-8 rounded bg-slate-100 text-indigo-500 flex items-center justify-center font-bold">4</div>
              <UserCheck className="w-5 h-5 text-slate-400 group-hover:text-indigo-400 transition-colors" />
            </div>
            <h4 className="font-bold text-slate-800 mb-1">能力・ペルソナ</h4>
            <p className="text-xs text-slate-500 mb-4">必要職能と才能、マイクロスキルを設計します。</p>
            <div className="text-sm font-medium text-slate-500 bg-slate-100 inline-block px-3 py-1 rounded-full border border-slate-200">
              未設計
            </div>
          </div>

        </div>
      </div>
    </div>
  );
};

// --- 1. 業務分解 (AnalysisView) ---
const AnalysisView = ({ user, processes, tasks }) => {
  const [newProcessName, setNewProcessName] = useState('');
  const [expandedProcess, setExpandedProcess] = useState(null);

  // 初期ロード時、もしプロセスが存在すれば最初のものを自動展開する
  useEffect(() => {
    if (processes.length > 0 && !expandedProcess) {
      setExpandedProcess(processes[0].id);
    }
  }, [processes]);

  // プロセスをorder順にソート
  const sortedProcesses = useMemo(() => {
    return [...processes].sort((a, b) => {
        const orderA = a.order !== undefined ? a.order : (a.createdAt?.toMillis?.() || 0);
        const orderB = b.order !== undefined ? b.order : (b.createdAt?.toMillis?.() || 0);
        return orderA - orderB;
    });
  }, [processes]);

  const addProcess = async () => {
    if (!newProcessName.trim()) return;
    
    // Calculate max order to append at the end
    let maxOrder = 0;
    if (processes.length > 0) {
        maxOrder = Math.max(...processes.map((p, i) => p.order !== undefined ? p.order : i));
    }
    
    const ref = doc(collection(db, 'artifacts', appId, 'users', user.uid, 'processes'));
    await setDoc(ref, { name: newProcessName.trim(), order: maxOrder + 1, createdAt: serverTimestamp() });
    setNewProcessName('');
  };

  const moveProcess = async (index, direction, e) => {
    if (e) e.stopPropagation();
    if (direction === 'up' && index === 0) return;
    if (direction === 'down' && index === sortedProcesses.length - 1) return;

    const targetIndex = direction === 'up' ? index - 1 : index + 1;
    const currentProcess = sortedProcesses[index];
    const targetProcess = sortedProcesses[targetIndex];

    const currentOrder = currentProcess.order !== undefined ? currentProcess.order : index;
    const targetOrder = targetProcess.order !== undefined ? targetProcess.order : targetIndex;

    const newCurrentOrder = currentOrder === targetOrder ? targetOrder + (direction === 'up' ? 1 : -1) : targetOrder;
    
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'processes', currentProcess.id), { order: newCurrentOrder });
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'processes', targetProcess.id), { order: currentOrder });
  };

  const deleteProcess = async (processId, e) => {
    if (e) e.stopPropagation();
    await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'processes', processId));
  };

  return (
    <div className="space-y-6">
      <div className="mb-8">
        <h2 className="text-2xl font-bold text-slate-800 mb-2">1. 業務分解</h2>
        <p className="text-slate-600 text-sm">部署の業務を「工程」と「タスク」に分解し、可視化します。</p>
      </div>

      {/* Add Process */}
      <div className="bg-white p-5 rounded-lg border border-slate-200 shadow-sm flex items-center space-x-4">
        <div className="flex-1">
          <input 
            type="text" 
            placeholder="新しい業務・工程名を入力 (例: インサイドセールス運用)" 
            className="w-full px-4 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none text-sm"
            value={newProcessName}
            onChange={(e) => setNewProcessName(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && addProcess()}
          />
        </div>
        <button 
          onClick={addProcess}
          className="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2 rounded-md font-medium text-sm flex items-center transition-colors"
        >
          <Plus className="w-4 h-4 mr-2" /> 業務を追加
        </button>
      </div>

      {/* Process List */}
      <div className="space-y-4">
        {processes.length === 0 && (
          <div className="text-center py-12 bg-slate-50 border-2 border-dashed border-slate-200 rounded-lg text-slate-500">
            まだ業務が登録されていません。上の入力欄から業務を追加してください。
          </div>
        )}
        {sortedProcesses.map((process, index) => (
          <ProcessCard 
            key={process.id} 
            process={process} 
            tasks={tasks.filter(t => t.processId === process.id)} 
            user={user}
            isExpanded={expandedProcess === process.id}
            onToggle={() => setExpandedProcess(expandedProcess === process.id ? null : process.id)}
            index={index}
            totalCount={sortedProcesses.length}
            onMoveUp={(e) => moveProcess(index, 'up', e)}
            onMoveDown={(e) => moveProcess(index, 'down', e)}
            onDelete={(e) => deleteProcess(process.id, e)}
          />
        ))}
      </div>
    </div>
  );
};

const ProcessCard = ({ process, tasks, user, isExpanded, onToggle, index, totalCount, onMoveUp, onMoveDown, onDelete }) => {
  const [newTaskName, setNewTaskName] = useState('');
  const [suggestedTasks, setSuggestedTasks] = useState([]);
  const [isSuggesting, setIsSuggesting] = useState(false);

  // Sort tasks by order or createdAt
  const sortedTasks = useMemo(() => {
    return [...tasks].sort((a, b) => {
        const orderA = a.order !== undefined ? a.order : (a.createdAt?.toMillis?.() || 0);
        const orderB = b.order !== undefined ? b.order : (b.createdAt?.toMillis?.() || 0);
        return orderA - orderB;
    });
  }, [tasks]);

  const fetchSuggestions = async (currentTasks) => {
    setIsSuggesting(true);
    const suggestions = await generateTaskSuggestions(process.name, currentTasks);
    // すでに存在するタスク名は除外
    const filtered = suggestions.filter(s => !currentTasks.some(t => t.name === s));
    setSuggestedTasks(filtered);
    setIsSuggesting(false);
  };

  const addTask = async (taskNameToAdd) => {
    const name = typeof taskNameToAdd === 'string' ? taskNameToAdd : newTaskName;
    if (!name.trim()) return;

    const maxOrder = sortedTasks.length > 0 ? Math.max(...sortedTasks.map((t, i) => t.order !== undefined ? t.order : i)) : 0;
    
    const ref = doc(collection(db, 'artifacts', appId, 'users', user.uid, 'tasks'));
    await setDoc(ref, { 
      processId: process.id, 
      name: name.trim(), 
      difficulty: 'medium',
      order: maxOrder + 1,
      createdAt: serverTimestamp() 
    });
    
    if (typeof taskNameToAdd !== 'string') {
      setNewTaskName('');
    }

    // 提案から追加した場合は、その提案を消す
    setSuggestedTasks(prev => prev.filter(t => t !== name.trim()));

    // タスク入力後に自動で次の予測を立てる
    const updatedTasks = [...sortedTasks, { name: name.trim() }];
    fetchSuggestions(updatedTasks);
  };

  const deleteTask = async (taskId, e) => {
    e.stopPropagation();
    await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'tasks', taskId));
  };

  const moveTask = async (index, direction, e) => {
    e.stopPropagation();
    if (direction === 'up' && index === 0) return;
    if (direction === 'down' && index === sortedTasks.length - 1) return;

    const targetIndex = direction === 'up' ? index - 1 : index + 1;
    const currentTask = sortedTasks[index];
    const targetTask = sortedTasks[targetIndex];

    const currentOrder = currentTask.order !== undefined ? currentTask.order : index;
    const targetOrder = targetTask.order !== undefined ? targetTask.order : targetIndex;

    const newCurrentOrder = currentOrder === targetOrder ? targetOrder + (direction === 'up' ? 1 : -1) : targetOrder;
    
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'tasks', currentTask.id), { order: newCurrentOrder });
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'tasks', targetTask.id), { order: currentOrder });
  };

  return (
    <div className="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden transition-all group">
      <div 
        className="px-6 py-4 flex items-center justify-between cursor-pointer hover:bg-slate-50"
        onClick={onToggle}
      >
        <div className="flex items-center">
          {isExpanded ? <ChevronDown className="w-5 h-5 text-slate-400 mr-3" /> : <ChevronRight className="w-5 h-5 text-slate-400 mr-3" />}
          <h3 className="text-lg font-medium text-slate-800">{process.name}</h3>
        </div>
        <div className="flex items-center">
          {/* プロセス移動・削除ボタン */}
          <div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity mr-4" onClick={e => e.stopPropagation()}>
            <button onClick={onMoveUp} disabled={index === 0} className="p-1.5 text-slate-400 hover:text-[#1a365d] hover:bg-slate-100 rounded disabled:opacity-30" title="上に移動">
              <ArrowUp className="w-4 h-4" />
            </button>
            <button onClick={onMoveDown} disabled={index === totalCount - 1} className="p-1.5 text-slate-400 hover:text-[#1a365d] hover:bg-slate-100 rounded disabled:opacity-30" title="下に移動">
              <ArrowDown className="w-4 h-4" />
            </button>
            <div className="w-px h-4 bg-slate-200 mx-1"></div>
            <button onClick={onDelete} className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded" title="業務を削除">
              <Trash2 className="w-4 h-4" />
            </button>
          </div>
          <div className="text-sm text-slate-500 bg-slate-100 px-3 py-1 rounded-full font-medium whitespace-nowrap">
            {tasks.length} タスク
          </div>
        </div>
      </div>
      
      {isExpanded && (
        <div className="px-6 pb-6 pt-2 border-t border-slate-100 bg-slate-50/50">
          <div className="space-y-2 mb-4">
            {sortedTasks.length === 0 ? (
              <p className="text-sm text-slate-400 italic py-2">タスクがありません。追加してください。</p>
            ) : (
              sortedTasks.map((task, index) => (
                <div key={task.id} className="bg-white p-3 rounded border border-slate-200 flex items-center justify-between text-sm shadow-sm group">
                  <div className="flex items-center">
                    <div className="w-2 h-2 rounded-full bg-indigo-400 mr-3"></div>
                    <span className="text-slate-700">{task.name}</span>
                  </div>
                  <div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                    <button onClick={(e) => moveTask(index, 'up', e)} disabled={index === 0} className="p-1 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded disabled:opacity-30" title="上に移動">
                      <ArrowUp className="w-4 h-4" />
                    </button>
                    <button onClick={(e) => moveTask(index, 'down', e)} disabled={index === sortedTasks.length - 1} className="p-1 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded disabled:opacity-30" title="下に移動">
                      <ArrowDown className="w-4 h-4" />
                    </button>
                    <div className="w-px h-4 bg-slate-200 mx-1"></div>
                    <button onClick={(e) => deleteTask(task.id, e)} className="p-1 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded" title="タスクを削除">
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              ))
            )}
          </div>
          
          {/* AI Suggestions */}
          {isSuggesting && (
             <div className="flex items-center text-xs text-indigo-500 mb-3 ml-1">
               <Loader2 className="w-3 h-3 mr-1 animate-spin" /> AIが次のタスクを予測中...
             </div>
          )}
          {!isSuggesting && suggestedTasks.length > 0 && (
            <div className="mb-4 space-y-2">
              <div className="flex items-center text-xs font-semibold text-indigo-600 ml-1">
                <Sparkles className="w-3 h-3 mr-1" /> AIが予測した次のタスク候補
              </div>
              <div className="flex flex-wrap gap-2">
                {suggestedTasks.map((sTask, idx) => (
                  <button
                    key={idx}
                    onClick={() => addTask(sTask)}
                    className="flex items-center text-xs bg-indigo-50 hover:bg-indigo-100 border border-indigo-100 text-indigo-700 px-3 py-1.5 rounded-full transition-colors shadow-sm"
                  >
                    <Plus className="w-3 h-3 mr-1" /> {sTask}
                  </button>
                ))}
              </div>
            </div>
          )}

          <div className="flex items-center space-x-2 mt-2">
            <input 
              type="text" 
              placeholder="タスクを追加 (例: リードへの初回架電)" 
              className="flex-1 px-3 py-2 border border-slate-300 rounded focus:ring-1 focus:ring-indigo-500 outline-none text-sm"
              value={newTaskName}
              onChange={(e) => setNewTaskName(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && addTask()}
            />
            <button 
              onClick={() => fetchSuggestions(sortedTasks)}
              disabled={isSuggesting}
              className="bg-indigo-50 border border-indigo-200 hover:bg-indigo-100 text-indigo-700 px-3 py-2 rounded text-sm font-medium transition-colors flex items-center whitespace-nowrap shadow-sm"
              title="AIにタスクの候補を提案させる"
            >
              {isSuggesting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4 sm:mr-1" />}
              <span className="hidden sm:inline">AI提案</span>
            </button>
            <button 
              onClick={addTask}
              className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded text-sm font-medium transition-colors whitespace-nowrap shadow-sm"
            >
              追加
            </button>
          </div>
        </div>
      )}
    </div>
  );
};


// --- 2. ボトルネック特定 (BottleneckView) ---
const BottleneckView = ({ user, processes, tasks, bottlenecks, setCurrentPath }) => {
  const [selectedTask, setSelectedTask] = useState(null);

  // Group and sort processes
  const sortedProcesses = useMemo(() => {
    return [...processes].sort((a, b) => {
        const orderA = a.order !== undefined ? a.order : (a.createdAt?.toMillis?.() || 0);
        const orderB = b.order !== undefined ? b.order : (b.createdAt?.toMillis?.() || 0);
        return orderA - orderB;
    });
  }, [processes]);

  // Group and sort tasks within processes
  const processWithTasks = useMemo(() => {
    return sortedProcesses.map(p => {
      const pTasks = tasks.filter(t => t.processId === p.id);
      const sortedTasks = [...pTasks].sort((a, b) => {
          const orderA = a.order !== undefined ? a.order : (a.createdAt?.toMillis?.() || 0);
          const orderB = b.order !== undefined ? b.order : (b.createdAt?.toMillis?.() || 0);
          return orderA - orderB;
      });
      return { ...p, tasks: sortedTasks };
    }).filter(p => p.tasks.length > 0);
  }, [sortedProcesses, tasks]);

  const moveProcess = async (index, direction, e) => {
    if (e) e.stopPropagation();
    if (direction === 'up' && index === 0) return;
    if (direction === 'down' && index === processWithTasks.length - 1) return;

    const targetIndex = direction === 'up' ? index - 1 : index + 1;
    const currentProcess = processWithTasks[index];
    const targetProcess = processWithTasks[targetIndex];

    const currentOrder = currentProcess.order !== undefined ? currentProcess.order : index;
    const targetOrder = targetProcess.order !== undefined ? targetProcess.order : targetIndex;

    const newCurrentOrder = currentOrder === targetOrder ? targetOrder + (direction === 'up' ? 1 : -1) : targetOrder;
    
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'processes', currentProcess.id), { order: newCurrentOrder });
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'processes', targetProcess.id), { order: currentOrder });
  };

  const moveTask = async (processIndex, taskIndex, direction, e) => {
    if (e) e.stopPropagation();
    const p = processWithTasks[processIndex];
    if (direction === 'up' && taskIndex === 0) return;
    if (direction === 'down' && taskIndex === p.tasks.length - 1) return;

    const targetIndex = direction === 'up' ? taskIndex - 1 : taskIndex + 1;
    const currentTask = p.tasks[taskIndex];
    const targetTask = p.tasks[targetIndex];

    const currentOrder = currentTask.order !== undefined ? currentTask.order : taskIndex;
    const targetOrder = targetTask.order !== undefined ? targetTask.order : targetIndex;

    const newCurrentOrder = currentOrder === targetOrder ? targetOrder + (direction === 'up' ? 1 : -1) : targetOrder;
    
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'tasks', currentTask.id), { order: newCurrentOrder });
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'tasks', targetTask.id), { order: currentOrder });
  };

  return (
    <div className="space-y-6 flex h-[calc(100vh-12rem)]">
      {/* Left: Task List */}
      <div className="w-1/2 pr-6 border-r border-slate-200 flex flex-col h-full">
        <div className="mb-6 shrink-0">
          <h2 className="text-2xl font-bold text-slate-800 mb-2">2. ボトルネック特定</h2>
          <p className="text-slate-600 text-sm">組織の成果を阻害しているタスク（ボトルネック）を特定し、原因を言語化します。</p>
        </div>

        <div className="flex-1 overflow-y-auto pr-2 space-y-6">
          {processWithTasks.length === 0 && (
             <div className="text-sm text-slate-500 p-4 bg-slate-100 rounded">先に「業務分解」でタスクを登録してください。</div>
          )}
          {processWithTasks.map((process, pIdx) => (
            <div key={process.id} className="space-y-2 group/process">
              <div className="flex items-center justify-between bg-slate-50 px-3 py-2 rounded-md">
                <h3 className="text-sm font-bold text-slate-600 tracking-wider truncate mr-2">{process.name}</h3>
                <div className="flex items-center space-x-1 opacity-0 group-hover/process:opacity-100 transition-opacity">
                  <button onClick={(e) => moveProcess(pIdx, 'up', e)} disabled={pIdx === 0} className="p-1 text-slate-400 hover:text-[#1a365d] hover:bg-slate-200 rounded disabled:opacity-30" title="業務を上に移動">
                    <ArrowUp className="w-3.5 h-3.5" />
                  </button>
                  <button onClick={(e) => moveProcess(pIdx, 'down', e)} disabled={pIdx === processWithTasks.length - 1} className="p-1 text-slate-400 hover:text-[#1a365d] hover:bg-slate-200 rounded disabled:opacity-30" title="業務を下に移動">
                    <ArrowDown className="w-3.5 h-3.5" />
                  </button>
                </div>
              </div>
              <div className="space-y-2 pl-2">
                {process.tasks.map((task, tIdx) => {
                  const bNeck = bottlenecks.find(b => b.taskId === task.id);
                  const isSelected = selectedTask?.id === task.id;
                  return (
                    <div 
                      key={task.id}
                      onClick={() => setSelectedTask(task)}
                      className={`p-3 rounded-lg border cursor-pointer transition-all relative group/task ${
                        isSelected 
                          ? 'border-indigo-500 ring-1 ring-indigo-500 bg-indigo-50/30' 
                          : 'border-slate-200 bg-white hover:border-indigo-300 hover:shadow-sm'
                      }`}
                    >
                      <div className="flex justify-between items-start mb-1 pr-6">
                        <span className="font-medium text-slate-800 text-sm leading-snug">{task.name}</span>
                        {bNeck && (
                          <span className={`text-xs px-2 py-0.5 rounded font-bold whitespace-nowrap ml-2 ${
                            bNeck.score >= 4 ? 'bg-red-100 text-red-700' : 'bg-orange-100 text-orange-700'
                          }`}>
                            影響度: {bNeck.score}
                          </span>
                        )}
                      </div>
                      {bNeck?.reason && (
                        <p className="text-xs text-slate-500 truncate pr-6">{bNeck.reason}</p>
                      )}
                      
                      {/* タスク移動ボタン */}
                      <div className="absolute right-1 top-1/2 -translate-y-1/2 flex flex-col items-center space-y-0.5 opacity-0 group-hover/task:opacity-100 transition-opacity">
                        <button onClick={(e) => moveTask(pIdx, tIdx, 'up', e)} disabled={tIdx === 0} className="p-1 text-slate-400 hover:text-[#1a365d] hover:bg-slate-100 rounded disabled:opacity-30" title="タスクを上に移動">
                          <ArrowUp className="w-3 h-3" />
                        </button>
                        <button onClick={(e) => moveTask(pIdx, tIdx, 'down', e)} disabled={tIdx === process.tasks.length - 1} className="p-1 text-slate-400 hover:text-[#1a365d] hover:bg-slate-100 rounded disabled:opacity-30" title="タスクを下に移動">
                          <ArrowDown className="w-3 h-3" />
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Right: Evaluation Form */}
      <div className="w-1/2 pl-6 flex flex-col h-full">
        {selectedTask ? (
          <BottleneckForm 
            user={user} 
            task={selectedTask} 
            existingData={bottlenecks.find(b => b.taskId === selectedTask.id)} 
            onNext={() => setCurrentPath('decision')}
          />
        ) : (
          <div className="flex-1 flex flex-col items-center justify-center text-slate-400 bg-slate-50 rounded-xl border border-slate-200 border-dashed">
            <AlertTriangle className="w-12 h-12 mb-4 text-slate-300" />
            <p>左側のリストからタスクを選択して、<br/>ボトルネックの評価を行ってください。</p>
          </div>
        )}
      </div>
    </div>
  );
};

const BottleneckForm = ({ user, task, existingData, onNext }) => {
  const [score, setScore] = useState(existingData?.score || 3);
  const [reason, setReason] = useState(existingData?.reason || '');
  
  // 新規追加: タスク詳細属性
  const [workload, setWorkload] = useState(existingData?.workload || 'medium'); // short, medium, long
  const [importance, setImportance] = useState(existingData?.importance || 'medium'); // low, medium, high
  const [difficulty, setDifficulty] = useState(existingData?.difficulty || 'months'); // days, months, year, years
  const [mentalLoad, setMentalLoad] = useState(existingData?.mentalLoad || 'medium'); // low, medium, high
  
  const [isSaving, setIsSaving] = useState(false);

  useEffect(() => {
    setScore(existingData?.score || 3);
    setReason(existingData?.reason || '');
    setWorkload(existingData?.workload || 'medium');
    setImportance(existingData?.importance || 'medium');
    setDifficulty(existingData?.difficulty || 'months');
    setMentalLoad(existingData?.mentalLoad || 'medium');
  }, [task, existingData]);

  const handleSave = async () => {
    setIsSaving(true);
    const id = existingData?.id || `bn_${task.id}`;
    const ref = doc(db, 'artifacts', appId, 'users', user.uid, 'bottlenecks', id);
    await setDoc(ref, {
      taskId: task.id,
      taskName: task.name,
      score,
      reason,
      workload,
      importance,
      difficulty,
      mentalLoad,
      updatedAt: serverTimestamp()
    });
    setIsSaving(false);
  };

  return (
    <div className="bg-white border border-slate-200 rounded-xl shadow-sm flex flex-col h-full">
      <div className="p-6 border-b border-slate-100 bg-slate-50/50 rounded-t-xl shrink-0">
        <h3 className="text-sm font-semibold text-slate-500 mb-1">評価対象タスク</h3>
        <p className="text-lg font-bold text-slate-800">{task.name}</p>
      </div>

      <div className="p-6 flex-1 overflow-y-auto space-y-8">
        
        {/* 新規: タスク属性評価パネル */}
        <div className="bg-white border border-slate-200 rounded-lg p-5 space-y-6 shadow-sm">
          <h4 className="font-bold text-slate-800 border-b border-slate-100 pb-2 flex items-center">
             <AlertTriangle className="w-4 h-4 mr-2 text-slate-400" /> タスクの特性評価
          </h4>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-xs font-bold text-slate-500 mb-2">工数・拘束時間</label>
              <select value={workload} onChange={e => setWorkload(e.target.value)} className="w-full text-sm border-slate-300 rounded focus:ring-[#4cb3d4] focus:border-[#4cb3d4]">
                <option value="short">短時間で終わる</option>
                <option value="medium">標準的 (数時間)</option>
                <option value="long">長時間・数日かかる</option>
              </select>
            </div>
            <div>
              <label className="block text-xs font-bold text-slate-500 mb-2">重要度 (売上・社外影響)</label>
              <select value={importance} onChange={e => setImportance(e.target.value)} className="w-full text-sm border-slate-300 rounded focus:ring-[#4cb3d4] focus:border-[#4cb3d4]">
                <option value="low">低い (内部処理のみ)</option>
                <option value="medium">中程度</option>
                <option value="high">高い (顧客満足・売上に直結)</option>
              </select>
            </div>
            <div>
              <label className="block text-xs font-bold text-slate-500 mb-2">難易度 (習得期間)</label>
              <select value={difficulty} onChange={e => setDifficulty(e.target.value)} className="w-full text-sm border-slate-300 rounded focus:ring-[#4cb3d4] focus:border-[#4cb3d4]">
                <option value="days">すぐできる (数日)</option>
                <option value="months">3ヶ月以内でいける</option>
                <option value="year">1年程度かかる</option>
                <option value="years">3年以上かかる (熟練)</option>
              </select>
            </div>
            <div>
              <label className="block text-xs font-bold text-slate-500 mb-2">メンタル負担・ストレス</label>
              <select value={mentalLoad} onChange={e => setMentalLoad(e.target.value)} className="w-full text-sm border-slate-300 rounded focus:ring-[#4cb3d4] focus:border-[#4cb3d4]">
                <option value="low">少ない</option>
                <option value="medium">普通</option>
                <option value="high">大きい (クレーム対応等)</option>
              </select>
            </div>
          </div>
        </div>

        <div>
          <label className="block text-sm font-bold text-slate-700 mb-4">
            総合的なボトルネック度合い (影響度)
          </label>
          <div className="flex justify-between items-center bg-slate-50 p-4 rounded-lg border border-slate-200">
            {[1, 2, 3, 4, 5].map(val => (
              <button
                key={val}
                onClick={() => setScore(val)}
                className={`w-12 h-12 rounded-full font-bold text-lg transition-all flex items-center justify-center ${
                  score === val 
                    ? val >= 4 ? 'bg-red-500 text-white shadow-md ring-4 ring-red-100' : 'bg-[#1a365d] text-white shadow-md ring-4 ring-indigo-100'
                    : 'bg-white text-slate-500 border border-slate-300 hover:bg-slate-100'
                }`}
              >
                {val}
              </button>
            ))}
          </div>
          <div className="flex justify-between text-xs text-slate-500 mt-2 px-2">
            <span>1: 全く問題ない</span>
            <span>5: 致命的なボトルネック</span>
          </div>
        </div>

        <div>
          <label className="block text-sm font-bold text-slate-700 mb-2">
            なぜボトルネックになっているか？ (理由・課題)
          </label>
          <textarea 
            className="w-full border border-slate-300 rounded-lg p-4 text-sm focus:ring-2 focus:ring-[#4cb3d4] outline-none min-h-[120px] resize-none"
            placeholder="例: 難易度が高く習得に1年以上かかるため属人化している。また重要度も高いため担当者のプレッシャーが大きい等。"
            value={reason}
            onChange={(e) => setReason(e.target.value)}
          ></textarea>
        </div>
      </div>

      <div className="p-6 border-t border-slate-100 bg-slate-50 rounded-b-xl flex justify-between items-center shrink-0">
        <button 
          onClick={handleSave}
          disabled={isSaving}
          className="bg-indigo-100 text-[#1a365d] hover:bg-indigo-200 px-6 py-2 rounded-md font-bold text-sm transition-colors flex items-center"
        >
          {isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
          保存する
        </button>
        
        {score >= 3 && (
          <button 
            onClick={onNext}
            className="bg-[#1a365d] text-white hover:bg-[#12284b] px-6 py-2 rounded-md font-bold text-sm transition-colors flex items-center shadow-sm"
          >
            このタスクの打ち手を比較する <ArrowRight className="w-4 h-4 ml-2" />
          </button>
        )}
      </div>
    </div>
  );
};


// --- 3. 打ち手比較 (DecisionView) ---
// JOBJOINの絶対ルール: 採用は最後の選択肢。整理→再配置→委託→育成→採用 の順で検討させる。
const DECISION_STEPS = [
  { id: 'sort', label: '1. 整理', desc: '無くせないか？統合・自動化できないか？', color: 'bg-blue-500' },
  { id: 'reassign', label: '2. 再配置', desc: '社内の別の人や部署で対応できないか？', color: 'bg-cyan-500' },
  { id: 'outsource', label: '3. 委託', desc: '外部ツールやBPOに外注できないか？', color: 'bg-teal-500' },
  { id: 'train', label: '4. 育成', desc: '既存社員を教育・育成して解決できないか？', color: 'bg-emerald-500' },
  { id: 'recruit', label: '5. 採用', desc: 'どうしても採用が必要な場合のみ検討。', color: 'bg-[#1a365d]' },
];

const DecisionView = ({ user, bottlenecks, decisions }) => {
  // Only show high score bottlenecks
  const targetBottlenecks = bottlenecks.filter(b => b.score >= 3).sort((a,b) => b.score - a.score);
  const [selectedBnId, setSelectedBnId] = useState(targetBottlenecks[0]?.id || null);

  const selectedBn = targetBottlenecks.find(b => b.id === selectedBnId);
  const existingDecision = decisions.find(d => d.bottleneckId === selectedBnId);

  return (
    <div className="space-y-6">
      <div className="mb-8">
        <h2 className="text-2xl font-bold text-slate-800 mb-2">3. 打ち手比較 (Action Decision)</h2>
        <p className="text-slate-600 text-sm">
          安易な採用は組織の歪みを生みます。JOBJOINの絶対ルールに従い、左から順に打ち手を検討してください。
        </p>
      </div>

      {targetBottlenecks.length === 0 ? (
        <div className="bg-white p-8 rounded-xl border border-slate-200 text-center text-slate-500">
          比較対象のボトルネックがありません。「2. ボトルネック特定」で影響度3以上のタスクを設定してください。
        </div>
      ) : (
        <div className="flex flex-col space-y-6">
          {/* Tabs for Bottlenecks (改善) */}
          <div className="flex space-x-3 overflow-x-auto pb-4 scrollbar-thin">
            {targetBottlenecks.map(bn => {
              // 決着済みかどうかを判定
              const isDecided = decisions.some(d => d.bottleneckId === bn.id && d.finalDecision);
              const isSelected = selectedBnId === bn.id;
              
              return (
                <button
                  key={bn.id}
                  onClick={() => setSelectedBnId(bn.id)}
                  title={bn.taskName} // ホバー時に全文表示
                  className={`px-4 py-3 rounded-lg border text-left min-w-[240px] max-w-[280px] shrink-0 transition-all flex flex-col relative ${
                    isSelected 
                      ? 'border-[#1a365d] bg-white shadow-md ring-2 ring-[#1a365d]/20' 
                      : isDecided 
                        ? 'border-emerald-200 bg-emerald-50/30 hover:bg-white opacity-80'
                        : 'border-slate-200 bg-slate-50 hover:bg-white text-slate-500'
                  }`}
                >
                  <div className="flex justify-between items-center mb-1.5 w-full">
                    <span className="text-xs font-bold opacity-70">影響度: {bn.score}</span>
                    {isDecided && (
                      <span className="flex items-center text-[10px] font-bold text-emerald-600 bg-emerald-100 px-1.5 py-0.5 rounded">
                        <Check className="w-3 h-3 mr-0.5" /> 決着済
                      </span>
                    )}
                  </div>
                  {/* タスク名が読めるように line-clamp-2 を適用 */}
                  <div className={`text-sm font-medium line-clamp-2 leading-snug ${isSelected ? 'text-[#1a365d]' : 'text-slate-700'}`}>
                    {bn.taskName}
                  </div>
                </button>
              );
            })}
          </div>

          {/* Wizard Content */}
          {selectedBn && (
            <DecisionWizard 
              user={user} 
              bottleneck={selectedBn} 
              existingData={existingDecision} 
            />
          )}
        </div>
      )}
    </div>
  );
};

const DecisionWizard = ({ user, bottleneck, existingData }) => {
  // Store considerations for each step
  const [notes, setNotes] = useState(existingData?.notes || {
    sort: '', reassign: '', outsource: '', train: '', recruit: ''
  });
  const [finalDecision, setFinalDecision] = useState(existingData?.finalDecision || null);
  const [currentStepIdx, setCurrentStepIdx] = useState(0);
  const [aiHints, setAiHints] = useState({});
  const [loadingAi, setLoadingAi] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [saveSuccess, setSaveSuccess] = useState(false);

  useEffect(() => {
    setNotes(existingData?.notes || { sort: '', reassign: '', outsource: '', train: '', recruit: '' });
    setFinalDecision(existingData?.finalDecision || null);
    setCurrentStepIdx(0);
    setAiHints({});
    setSaveSuccess(false);
  }, [bottleneck.id, existingData]);

  const updateNote = (stepId, value) => {
    setNotes(prev => ({ ...prev, [stepId]: value }));
  };

  const fetchHint = async (stepId) => {
    setLoadingAi(true);
    const hint = await generateAIHint(bottleneck.taskName, bottleneck.reason, stepId);
    setAiHints(prev => ({ ...prev, [stepId]: hint }));
    setLoadingAi(false);
  };

  const handleSave = async () => {
    setIsSaving(true);
    const id = existingData?.id || `dec_${bottleneck.id}`;
    const ref = doc(db, 'artifacts', appId, 'users', user.uid, 'decisions', id);
    await setDoc(ref, {
      bottleneckId: bottleneck.id,
      notes,
      finalDecision,
      updatedAt: serverTimestamp()
    });
    setIsSaving(false);
    setSaveSuccess(true);
    setTimeout(() => setSaveSuccess(false), 3000); // 3秒後に成功メッセージを消す
  };

  const currentStep = DECISION_STEPS[currentStepIdx];
  const isLastStep = currentStepIdx === DECISION_STEPS.length - 1;

  return (
    <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
      {/* Wizard Progress Header */}
      <div className="flex bg-slate-50 border-b border-slate-200">
        {DECISION_STEPS.map((step, idx) => {
          const isPassed = idx < currentStepIdx;
          const isActive = idx === currentStepIdx;
          return (
            <button
              key={step.id}
              onClick={() => setCurrentStepIdx(idx)}
              className={`flex-1 py-4 px-2 text-center text-sm font-bold border-b-2 transition-all ${
                isActive ? `border-${step.color.split('-')[1]}-500 text-slate-800 bg-white` : 
                isPassed ? 'border-slate-300 text-slate-600' : 'border-transparent text-slate-400'
              }`}
            >
              {step.label}
            </button>
          );
        })}
      </div>

      <div className="p-8 flex flex-col md:flex-row gap-8">
        {/* Left: Step Content */}
        <div className="flex-1 space-y-6">
          <div className="flex items-center">
            <div className={`w-8 h-8 rounded-lg ${currentStep.color} text-white flex items-center justify-center font-bold mr-4 shadow-sm`}>
              {currentStepIdx + 1}
            </div>
            <div>
              <h3 className="text-xl font-bold text-slate-800">{currentStep.label} の検討</h3>
              <p className="text-sm text-slate-500">{currentStep.desc}</p>
            </div>
          </div>

          <div className="bg-slate-50 p-4 rounded-lg border border-slate-200 text-sm">
            <span className="font-bold text-slate-700 block mb-1">現在の課題認識:</span>
            <span className="text-slate-600">{bottleneck.reason || "（理由が入力されていません）"}</span>
          </div>

          <div className="space-y-3">
            <div className="flex justify-between items-end">
              <label className="text-sm font-bold text-slate-700">検討メモ・結論</label>
              <button 
                onClick={() => fetchHint(currentStep.id)}
                disabled={loadingAi}
                className="text-xs bg-[#4cb3d4]/10 text-[#1a365d] hover:bg-[#4cb3d4]/20 px-3 py-1.5 rounded-full font-bold flex items-center transition-colors border border-[#4cb3d4]/30"
              >
                {loadingAi ? <Loader2 className="w-3 h-3 mr-1 animate-spin" /> : <Lightbulb className="w-3 h-3 mr-1 text-[#4cb3d4]" />}
                AIコンサルにヒントを聞く
              </button>
            </div>

            {aiHints[currentStep.id] && (
              <div className="bg-[#4cb3d4]/5 border border-[#4cb3d4]/20 p-4 rounded-lg text-sm text-slate-800 leading-relaxed relative">
                <Lightbulb className="w-4 h-4 text-[#4cb3d4] absolute top-4 left-4" />
                <div className="pl-6">{aiHints[currentStep.id]}</div>
              </div>
            )}

            <textarea 
              className="w-full border border-slate-300 rounded-lg p-4 text-sm focus:ring-2 focus:ring-[#4cb3d4] outline-none min-h-[120px] resize-none"
              placeholder={`${currentStep.label}に関する見解を入力してください...`}
              value={notes[currentStep.id]}
              onChange={(e) => updateNote(currentStep.id, e.target.value)}
            ></textarea>
          </div>

          <div className="flex justify-between items-center pt-4 border-t border-slate-100">
            {currentStepIdx > 0 ? (
              <button onClick={() => setCurrentStepIdx(prev => prev - 1)} className="text-slate-500 hover:text-slate-800 text-sm font-medium px-4 py-2">
                戻る
              </button>
            ) : <div></div>}
            
            {!isLastStep ? (
              <button 
                onClick={() => setCurrentStepIdx(prev => prev + 1)}
                className="bg-slate-800 text-white hover:bg-slate-900 px-6 py-2 rounded-md font-bold text-sm transition-colors flex items-center"
              >
                次の選択肢へ <ArrowRight className="w-4 h-4 ml-2" />
              </button>
            ) : (
              <div className="text-sm font-bold text-slate-400">すべての検討が完了しました</div>
            )}
          </div>
        </div>

        {/* Right: Final Decision Panel */}
        <div className="w-full md:w-80 bg-slate-50 p-6 rounded-xl border border-slate-200 flex flex-col shrink-0">
          <h4 className="font-bold text-slate-800 mb-4 border-b border-slate-200 pb-2">最終結論の決定</h4>
          <p className="text-xs text-slate-500 mb-6">
            すべてのステップを検討した上で、このタスクに対する最終的な打ち手を選択してください。
          </p>

          <div className="space-y-3 flex-1">
            {DECISION_STEPS.map(step => (
              <label 
                key={`final-${step.id}`} 
                className={`flex items-center p-3 rounded-lg border cursor-pointer transition-all ${
                  finalDecision === step.id 
                    ? `border-${step.color.split('-')[1]}-500 ring-1 ring-${step.color.split('-')[1]}-500 bg-white shadow-sm` 
                    : 'border-slate-200 bg-white hover:bg-slate-50 opacity-80'
                }`}
              >
                <input 
                  type="radio" 
                  name="finalDecision" 
                  value={step.id} 
                  checked={finalDecision === step.id}
                  onChange={() => setFinalDecision(step.id)}
                  className="mr-3 text-[#1a365d] focus:ring-[#4cb3d4]"
                />
                <span className={`font-bold text-sm ${finalDecision === step.id ? 'text-slate-900' : 'text-slate-600'}`}>
                  {step.label}
                </span>
              </label>
            ))}
          </div>

          <div className="pt-6 mt-auto flex flex-col items-center">
            <button 
              onClick={handleSave}
              disabled={!finalDecision || isSaving}
              className={`w-full py-3 rounded-lg font-bold text-sm transition-all flex justify-center items-center ${
                finalDecision && !isSaving
                  ? 'bg-[#1a365d] text-white shadow-md hover:bg-[#12284b]'
                  : 'bg-slate-200 text-slate-400 cursor-not-allowed'
              }`}
            >
              {isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
              結論を保存して決着
            </button>
            {/* 保存成功フィードバック */}
            {saveSuccess && (
              <div className="mt-3 text-xs font-bold text-emerald-600 flex items-center animate-in fade-in slide-in-from-top-2">
                <CheckCircle className="w-4 h-4 mr-1" /> 保存しました
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

// --- 4. 能力・ペルソナ (CapabilityView) ---
// 新規追加: 「育成」「採用」が選ばれたタスクの能力設計画面
const CapabilityView = ({ user, decisions, bottlenecks, tasks }) => {
  // 打ち手比較で「育成(train)」または「採用(recruit)」が選ばれたものだけを抽出
  const targetDecisions = decisions.filter(d => d.finalDecision === 'train' || d.finalDecision === 'recruit');
  
  const [selectedDecId, setSelectedDecId] = useState(targetDecisions[0]?.id || null);
  const selectedDecision = targetDecisions.find(d => d.id === selectedDecId);
  
  // ボトルネック情報からタスク名を取得
  const selectedBn = bottlenecks.find(b => b.id === selectedDecision?.bottleneckId);

  return (
    <div className="space-y-6 flex h-[calc(100vh-12rem)]">
      {/* Left: Target List */}
      <div className="w-1/3 pr-6 border-r border-slate-200 flex flex-col h-full shrink-0">
        <div className="mb-6 shrink-0">
          <h2 className="text-2xl font-bold text-slate-800 mb-2">4. 能力・ペルソナ</h2>
          <p className="text-slate-600 text-sm">「育成」「採用」が必要と判断されたタスクに対して、必要な能力（職能・才能・マイクロスキル）を言語化します。</p>
        </div>

        <div className="flex-1 overflow-y-auto pr-2 space-y-3">
          {targetDecisions.length === 0 ? (
            <div className="text-sm text-slate-500 p-4 bg-slate-50 rounded border border-dashed border-slate-200">
              対象タスクがありません。「打ち手比較」で「育成」または「採用」と結論づけられたタスクがここに表示されます。
            </div>
          ) : (
            targetDecisions.map(dec => {
              const bn = bottlenecks.find(b => b.id === dec.bottleneckId);
              const isSelected = selectedDecId === dec.id;
              const isRecruit = dec.finalDecision === 'recruit';
              
              return (
                <div 
                  key={dec.id}
                  onClick={() => setSelectedDecId(dec.id)}
                  className={`p-4 rounded-lg border cursor-pointer transition-all ${
                    isSelected 
                      ? `border-${isRecruit ? 'indigo' : 'emerald'}-500 ring-1 ring-${isRecruit ? 'indigo' : 'emerald'}-500 bg-white shadow-sm` 
                      : 'border-slate-200 bg-slate-50 hover:bg-white'
                  }`}
                >
                  <div className="flex justify-between items-start mb-2">
                    <span className={`text-[10px] px-2 py-0.5 rounded font-bold ${
                      isRecruit ? 'bg-indigo-100 text-indigo-700' : 'bg-emerald-100 text-emerald-700'
                    }`}>
                      {isRecruit ? '採用要件' : '育成設計'}
                    </span>
                  </div>
                  <span className="font-bold text-slate-800 text-sm leading-snug line-clamp-2">{bn?.taskName || "不明なタスク"}</span>
                </div>
              );
            })
          )}
        </div>
      </div>

      {/* Right: Capability Form */}
      <div className="w-2/3 pl-6 flex flex-col h-full">
        {selectedDecision && selectedBn ? (
          <CapabilityForm 
            user={user} 
            decision={selectedDecision} 
            bottleneck={selectedBn}
          />
        ) : (
          <div className="flex-1 flex flex-col items-center justify-center text-slate-400 bg-slate-50 rounded-xl border border-slate-200 border-dashed">
            <UserCheck className="w-12 h-12 mb-4 text-slate-300" />
            <p className="text-center">左側のリストからタスクを選択して、<br/>必要能力の設計を行ってください。</p>
          </div>
        )}
      </div>
    </div>
  );
};

// 簡易版の能力入力フォーム（MVP用モックアップ）
const CapabilityForm = ({ user, decision, bottleneck }) => {
  const [competency, setCompetency] = useState(''); // 職能
  const [talents, setTalents] = useState(''); // 才能（テキストベース）
  const [microSkills, setMicroSkills] = useState(''); // マイクロスキル（箇条書き）

  // ここで既存の能力データをフェッチする処理が入る想定ですが、
  // MVPプレビュー用に今はローカルステートのみで表示しています。

  return (
    <div className="bg-white border border-slate-200 rounded-xl shadow-sm flex flex-col h-full">
      <div className={`p-6 border-b border-slate-100 rounded-t-xl shrink-0 ${decision.finalDecision === 'recruit' ? 'bg-indigo-50/50' : 'bg-emerald-50/50'}`}>
        <div className="flex items-center mb-1">
          <span className={`text-xs font-bold mr-2 ${decision.finalDecision === 'recruit' ? 'text-indigo-600' : 'text-emerald-600'}`}>
            [{decision.finalDecision === 'recruit' ? '採用' : '育成'}のターゲットタスク]
          </span>
        </div>
        <p className="text-lg font-bold text-slate-800">{bottleneck.taskName}</p>
        <p className="text-xs text-slate-500 mt-2 line-clamp-2">ボトルネック理由: {bottleneck.reason}</p>
      </div>

      <div className="p-6 flex-1 overflow-y-auto space-y-8">
        <div>
          <label className="block text-sm font-bold text-[#1a365d] mb-2 flex items-center">
            1. 必要職能 <span className="ml-2 text-xs font-normal text-slate-500">仕事で成果を出すために必要な再現性ある力</span>
          </label>
          <input 
            type="text" 
            placeholder="例: クレーム対応における初期鎮火のスキル" 
            className="w-full border border-slate-300 rounded-md p-3 text-sm focus:ring-2 focus:ring-[#4cb3d4] outline-none"
            value={competency}
            onChange={e => setCompetency(e.target.value)}
          />
        </div>

        <div>
          <label className="block text-sm font-bold text-[#1a365d] mb-2 flex items-center">
            2. つながる才能 <span className="ml-2 text-xs font-normal text-slate-500">自然に出やすい思考・感じ方・行動傾向 (※点数化しない)</span>
          </label>
          <textarea 
            rows={2}
            placeholder="例: 相手の感情に寄り添い、冷静に話を聞き出せる" 
            className="w-full border border-slate-300 rounded-md p-3 text-sm focus:ring-2 focus:ring-[#4cb3d4] outline-none resize-none"
            value={talents}
            onChange={e => setTalents(e.target.value)}
          />
        </div>

        <div>
          <label className="block text-sm font-bold text-[#1a365d] mb-2 flex items-center">
            3. 必要マイクロスキル <span className="ml-2 text-xs font-normal text-slate-500">職能を構成する具体的な行動指標（KPIの元になります）</span>
          </label>
          <textarea 
            rows={4}
            placeholder="・第一声で相手の怒りを増幅させない声のトーンを出せる&#13;&#10;・事実と感情を切り分けてヒアリングできる&#13;&#10;・代替案を即座に2つ以上提示できる" 
            className="w-full border border-slate-300 rounded-md p-3 text-sm focus:ring-2 focus:ring-[#4cb3d4] outline-none resize-none"
            value={microSkills}
            onChange={e => setMicroSkills(e.target.value)}
          />
        </div>
      </div>

      <div className="p-6 border-t border-slate-100 bg-slate-50 rounded-b-xl flex justify-between items-center shrink-0">
        <button className="bg-[#1a365d] text-white hover:bg-[#12284b] px-8 py-2 rounded-md font-bold text-sm transition-colors flex items-center shadow-sm">
          <Save className="w-4 h-4 mr-2" /> 能力定義を保存する
        </button>
      </div>
    </div>
  );
};