import React, { useState, useEffect, useMemo, useRef } 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, Settings2,
  Calculator, TrendingUp, DollarSign, Target, ClipboardCheck, Users, Download, Printer, X
} 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';

// ==========================================
// JOBJOIN 辞書データ
// ==========================================
const COMPETENCY_DICT = [
  "0-1突破力", "改善・工夫力", "戦略的構想力", "創造的発想力", "アンラーニング力", "意味づけ・納得形成力", "違和感感受力",
  "構造化・整理力", "リスク予知力", "計数・論理力", "探究・リサーチ力", "形式知化力", "IT・ツール適応力", "リソース管理力",
  "本質的翻訳力", "ラポール形成力", "利害調整力", "プレゼン力", "交渉・締結力", "バッドニュース力",
  "深層傾聴力", "エンパワメント力", "非言語察知力", "ティーチング力", "ホスピタリティ", "奉仕型リーダー", "フォロワーシップ", "多様性受容力",
  "瞬発的決断力", "精密継続力", "即レス・即行力", "マルチタスク力", "完遂・執着力", "フィジカル力", "美的・空間力", "自己駆動",
  "バウンダリー力", "規律遵守力", "自律的学習力", "レジリエンス", "セルフ管理力", "グリット", "当事者意識", "成長解釈力", "価値観一貫性"
];

const TALENT_DICT = [
  "小さなおかしさに気づける", "くり返しのパターンに気づける", "危ない流れを先に感じられる", "場の空気がわかる", "相手の気持ちの変化に気づける", "見た目や空間のズレに気づける", "今が動くタイミングだとわかる", "大事なところを直感でつかめる",
  "頭の中を整理できる", "大事なところをつかめる", "原因と結果を考えられる", "似ているものを分けてまとめられる", "やり方をわかりやすく形にできる", "先の流れを考えて動ける", "どこまでやるかをはっきりさせられる",
  "ゼロから動き出せる", "新しい見方を思いつける", "先の理想を描ける", "少ない情報でも仮の答えを考えられる", "知らないことを広げて探せる", "出来事に意味を持たせられる", "変化を受け入れやすい",
  "人に安心してもらえる", "相手の気持ちに寄りそえる", "相手目線で考えられる", "人の背中を押せる", "ぶつかりすぎずにまとめられる", "言葉以外のサインも読める", "自分の熱をまわりに広げられる", "違うタイプの人も受け入れられる",
  "すぐ動ける", "早く進めたくなる", "コツコツ続けられる", "切り替えが早い", "最後までやり切れる", "自分ごととして引き受けられる", "大変な時でも崩れにくい",
  "ルールを守れる", "自分を整えられる", "言うこととやることがぶれにくい", "自分をふり返れる", "学ぶことが好き", "言われたことを自分ごとにできる", "失敗から学べる", "自分と相手の線引きを守れる"
];

const MICROSKILL_DICT = [
  "論理的思考", "仮説構築力", "問題発見力", "因数分解力", "MECE思考", "なぜなぜ分析", "抽象化・具体化", "クリティカル思考", "構造化能力", "意思決定力", "リスク評価力", "パラドックス対処",
  "ビジョン構想力", "バックキャスティング", "ラテラル思考", "アイデア発想力", "コンセプト設計力", "デザイン思考", "顧客価値設計", "ビジネスモデル解剖", "シナリオプランニング", "新結合スキル", "転用力 / アナロジー", "ゲーム理論思考",
  "計数感覚", "データ収集力", "情報ソース評価", "パターン認識力", "相関・因果特定", "KPI設計力", "モニタリング力", "予測シミュレーション", "表計算リテラシー", "データ可視化", "ファクトベース判断", "ROI思考",
  "ストーリー構成力", "スライド作成力", "デリバリースキル", "要約・言語化力", "平易化スキル", "メタファー活用", "レトリック", "質疑応答力", "エレベーターピッチ", "ビジネスライティング", "コピーライティング", "図解スキル",
  "傾聴力", "質問力", "共感力", "ラポール形成", "非言語読解力", "フィードバック力", "アサーション", "コンフリクト解消", "交渉・折衝力", "クロージング力", "ネットワーキング", "影響力 / 説得力",
  "チームビルディング", "タスクアサイン", "動機付けスキル", "コーチング", "メンタリング", "権限委譲", "心理的安全性醸成", "ダイバーシティ受容", "変革リーダーシップ", "危機管理リーダー", "合意形成 / 根回し", "フォロワーシップ",
  "優先順位付け", "目標管理", "納期遵守力", "WBS作成力", "マルチタスク処理", "報連相", "会議ファシリテーション", "タイムボクシング", "リソース配分力", "バッファ管理", "ToDo管理力", "GTD",
  "プロセス設計力", "標準化 / マニュアル化", "ボトルネック特定", "ポカヨケ設計", "5S", "PDCA", "正確性・緻密さ", "スピード・俊敏性", "ルーチン維持力", "改善提案", "ドキュメント管理", "引き継ぎスキル",
  "デジタルリテラシー", "情報セキュリティ", "ツール適応力", "PC操作効率", "検索スキル", "AIプロンプト力", "データリテラシー", "ノーコード活用", "DXマインド", "自動化マインド", "SNS活用力", "リモートワーク力",
  "自律的学習", "アンラーニング", "メタ認知", "知的探究心", "情報キュレーション", "内省", "速読・多読", "メモ書き・記録", "インプット習慣", "アウトプット習慣", "資格・専門性獲得", "教養・リベラルアーツ",
  "感情コントロール", "ストレス管理", "レジリエンス", "アンガーマネジメント", "規律性・時間厳守", "誠実性", "マインドフルネス", "健康管理", "エネルギー管理", "集中力", "グリット", "習慣形成力",
  "成長マインドセット", "当事者意識", "顧客志向", "成果志向", "ポジティブ思考", "謙虚さ", "変化適応力", "曖昧さ耐性", "プロフェッショナリズム", "チャレンジ精神", "利他・貢献心", "価値観一貫性"
];

const apiKey = ""; // Provided by execution environment

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');
};

// ==========================================
// AI Functions (JSON Schemaにより堅牢化)
// ==========================================
const generateTemplateJSON = async (profile, existingDataText) => {
  const prompt = `あなたはBtoB SaaS「JOBJOIN」の組織コンサルタントAIです。企業サービス: ${profile.service}、ターゲット役割: ${profile.targetRole}
${existingDataText ? `\n【既存の業務データ】\n${existingDataText}\n\n※上記を最優先し、大・中・小項目に整理してください。\n` : ''}`;
  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 }] }],
        generationConfig: {
          responseMimeType: "application/json",
          responseSchema: {
            type: "OBJECT",
            properties: {
              categories: { type: "ARRAY", items: { type: "OBJECT", properties: { name: { type: "STRING" }, processes: { type: "ARRAY", items: { type: "OBJECT", properties: { name: { type: "STRING" }, tasks: { type: "ARRAY", items: { type: "STRING" } } } } } } } }
            }
          }
        }
      })
    });
    const result = await fetchWithRetry(response);
    return JSON.parse(result.candidates?.[0]?.content?.parts?.[0]?.text || "{}");
  } catch (error) { return null; }
};

const generateTaskSuggestions = async (processName, existingTasks) => {
  const existingText = existingTasks.map(t => t.name).join('\n');
  const prompt = `中項目「${processName}」において、現在以下のタスクがあります。\n${existingText}\n次に続くべきタスク候補を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) { return []; }
};

const generateAIHint = async (taskName, bottleneckReason, stepId) => {
  const stepPrompts = {
    'sort': 'このタスクを「無くす・自動化する」アイデアや問いかけを2〜3行で。',
    'reassign': 'このタスクを「別担当へ再配置する」基準や問いかけを2〜3行で。',
    'outsource': 'このタスクを「外部委託する」メリットや検討ポイントを2〜3行で。',
    'train': 'このタスクを「既存社員を育成して任せる」ための教育ヒントを2〜3行で。',
    'recruit': '「採用する」場合、絶対に外せないスキル要件への問いかけを2〜3行で。'
  };
  const prompt = `タスク名: ${taskName}\n課題(理由): ${bottleneckReason}\n指示: ${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 }] }] })
    });
    const result = await fetchWithRetry(response);
    return result.candidates?.[0]?.content?.parts?.[0]?.text || "ヒントを生成できませんでした。";
  } catch (error) { return "エラーが発生しました。"; }
};

const generateCapabilityJSON = async (taskName, reason, decisionLabel) => {
  if (!apiKey) return null;
  const prompt = `タスク「${taskName}」（課題: ${reason}）の${decisionLabel}に必要な能力を、指定されたリストから抽出してください。`;
  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 }] }],
        generationConfig: {
          responseMimeType: "application/json",
          responseSchema: {
            type: "OBJECT",
            properties: {
              competencies: { type: "ARRAY", items: { type: "STRING", enum: COMPETENCY_DICT }, description: "選んだ職能3つ" },
              talents: { type: "ARRAY", items: { type: "STRING", enum: TALENT_DICT }, description: "選んだ才能3つ" },
              microSkills: { type: "ARRAY", items: { type: "STRING", enum: MICROSKILL_DICT }, description: "選んだスキル5つ" }
            }
          }
        }
      })
    });
    const result = await fetchWithRetry(response);
    return JSON.parse(result.candidates?.[0]?.content?.parts?.[0]?.text || "{}");
  } catch (error) { throw error; }
};

const generatePersonaSummary = async (competencies, talents, microSkills) => {
  if (!apiKey) return "";
  const prompt = `以下の能力要件（職能・才能・マイクロスキル）を持つ人材像（ペルソナ）を、採用ターゲットまたは育成のゴールとして、魅力的でわかりやすい3〜4行のサマリー文章にまとめてください。
職能: ${competencies.join(", ")}\n才能: ${talents.join(", ")}\nマイクロスキル: ${microSkills.join(", ")}`;
  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);
    return result.candidates?.[0]?.content?.parts?.[0]?.text || "サマリーを生成できませんでした。";
  } catch (error) { return "エラーが発生しました。"; }
};

// ==========================================
// 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 [categories, setCategories] = useState([]);
  const [processes, setProcesses] = useState([]);
  const [tasks, setTasks] = useState([]);
  const [bottlenecks, setBottlenecks] = useState([]);
  const [decisions, setDecisions] = useState([]);
  const [personas, setPersonas] = useState([]);
  const [kpis, setKpis] = useState([]);
  const [reviews, setReviews] = useState([]);

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

  // Initialize Auth & Global Listeners
  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 error:", error); }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => { setUser(u); setAuthLoading(false); });
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!user) return;
    const fetchProfile = async () => {
      const docSnap = await getDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'profile'));
      if (docSnap.exists()) { setProfile(docSnap.data()); setCurrentPath('dashboard'); } 
      else { setCurrentPath('setup'); }
      setIsInitializing(false);
    };
    fetchProfile();
    
    const uPath = (col) => collection(db, 'artifacts', appId, 'users', user.uid, col);
    const unsubs = [
      onSnapshot(uPath('categories'), (s) => setCategories(s.docs.map(d => ({ id: d.id, ...d.data() }))), console.error),
      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),
      onSnapshot(uPath('personas'), (s) => setPersonas(s.docs.map(d => ({ id: d.id, ...d.data() }))), console.error),
      onSnapshot(uPath('kpis'), (s) => setKpis(s.docs.map(d => ({ id: d.id, ...d.data() }))), console.error),
      onSnapshot(uPath('reviews'), (s) => setReviews(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 print-app-wrapper">
      <Sidebar currentPath={currentPath} setCurrentPath={setCurrentPath} />
      <div className="flex-1 flex flex-col h-full overflow-hidden print-main-wrapper">
        <Header user={user} profile={profile} />
        <StepNavigation currentPath={currentPath} />
        <main className="flex-1 overflow-y-auto p-8 print-main-content">
          <div className="max-w-6xl 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} categories={categories} processes={processes} tasks={tasks} />}
            {currentPath === 'bottleneck' && <BottleneckView user={user} categories={categories} processes={processes} tasks={tasks} bottlenecks={bottlenecks} setCurrentPath={setCurrentPath} />}
            {currentPath === 'decision' && <DecisionView user={user} categories={categories} processes={processes} tasks={tasks} bottlenecks={bottlenecks} decisions={decisions} />}
            {currentPath === 'capability' && <CapabilityView user={user} decisions={decisions} bottlenecks={bottlenecks} tasks={tasks} personas={personas} />}
            {currentPath === 'kpi' && <KpiEducationView user={user} decisions={decisions} bottlenecks={bottlenecks} kpis={kpis} />}
            {currentPath === 'review' && <ReviewView user={user} profile={profile} decisions={decisions} bottlenecks={bottlenecks} kpis={kpis} reviews={reviews} />}
          </div>
        </main>
      </div>
      
      {/* グローバルに配置するデータリストと印刷・スクロール用スタイル */}
      <datalist id="freqOptions"><option value="毎日" /><option value="毎週" /><option value="月次" /><option value="随時" /><option value="年次" /></datalist>
      <style dangerouslySetInnerHTML={{__html: `
        .custom-scrollbar::-webkit-scrollbar { height: 10px; width: 10px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #f8fafc; border-radius: 8px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid #f8fafc; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        
        /* 印刷用スタイル */
        @media print {
          body { background: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
          .print-hidden, .print-app-wrapper > div:first-child, header, .print-main-wrapper > div:nth-child(2) { display: none !important; }
          .print-app-wrapper, .print-main-wrapper, .print-main-content { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; }
          .print-only { display: block !important; }
          .print-break-inside-avoid { break-inside: avoid; page-break-inside: avoid; }
        }
        .print-only { display: none; }
      `}} />
    </div>
  );
}

// ==========================================
// Layout Components
// ==========================================
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. 能力・ペルソナ' },
    { id: 'kpi', icon: Target, label: '5. KPI・教育設計' },
    { id: 'review', icon: ClipboardCheck, label: '6. 定期レビュー' },
  ];

  return (
    <div className="w-64 shrink-0 bg-slate-900 text-slate-300 flex flex-col shadow-xl z-10 h-full">
      <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 overflow-y-auto custom-scrollbar">
        <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 shrink-0">
        <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 shrink-0 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: '能力・ペルソナ' }, { id: 'kpi', label: 'KPI・教育設計' }, { id: 'review', label: 'レビュー' }
  ];
  const currentIndex = steps.findIndex(s => s.id === currentPath);
  if (currentIndex === -1) return null;

  return (
    <div className="bg-white border-b border-slate-200 px-8 py-3 shrink-0 overflow-x-auto custom-scrollbar">
      <div className="flex items-center min-w-max 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-6 h-6 rounded-full flex items-center justify-center text-[10px] 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-3 h-3" /> : index + 1}
                </div>
                <span className="text-xs">{step.label}</span>
              </div>
              {index < steps.length - 1 && <div className="w-8 mx-2"><div className={`h-0.5 w-full ${isPast ? 'bg-[#1a365d]/30' : 'bg-slate-100'}`}></div></div>}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
};

// ==========================================
// Views: Setup & Dashboard
// ==========================================
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 = 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 = (ev) => { setExistingDataText(prev => prev + (prev ? '\n\n' : '') + ev.target.result); }; reader.readAsText(file); };

  const handleSubmit = async (e) => {
    e.preventDefault(); if (!formData.companyName || !formData.targetRole) return;
    setIsGenerating(true); setGenStatus('企業プロファイルを保存中...');
    await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'profile'), { ...formData, updatedAt: serverTimestamp() }, { merge: true });
    
    if (generateTemplate) {
      setGenStatus(`${formData.targetRole} の業務・タスクを自動生成中...`);
      const templateData = await generateTemplateJSON(formData, existingDataText);
      if (templateData && templateData.categories) {
        setGenStatus('生成された3階層の叩き台をデータベースにセットアップ中...');
        let cOrder = 100;
        for (const c of templateData.categories) {
          const cRef = doc(collection(db, 'artifacts', appId, 'users', user.uid, 'categories')); await setDoc(cRef, { name: c.name, order: cOrder++, createdAt: serverTimestamp() });
          let pOrder = 0;
          for (const p of c.processes || []) {
            const pRef = doc(collection(db, 'artifacts', appId, 'users', user.uid, 'processes')); await setDoc(pRef, { categoryId: cRef.id, name: p.name, order: 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, order: tOrder++, createdAt: serverTimestamp() });
            }
          }
        }
      }
    }
    setIsGenerating(false); onComplete();
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mb-8 p-8 max-w-3xl mx-auto">
      {isGenerating ? (
        <div className="py-16 flex flex-col items-center justify-center text-center animate-in fade-in">
          <Loader2 className="w-12 h-12 text-[#1a365d] animate-spin mb-4" />
          <h3 className="text-xl font-bold text-slate-800">オンボーディング構築中</h3><p className="mt-2 text-sm text-slate-500 font-medium">{genStatus}</p>
        </div>
      ) : (
        <form className="space-y-6" onSubmit={handleSubmit}>
          <h2 className="text-2xl font-bold text-slate-800 tracking-tight">企業プロファイル & AI初期セットアップ</h2>
          <div className="grid grid-cols-2 gap-6">
            <div className="col-span-2"><label className="block text-sm font-medium text-slate-700">企業名 *</label><input required name="companyName" value={formData.companyName} onChange={handleChange} className="mt-1 block w-full border border-slate-300 rounded-md p-2 text-sm" /></div>
            <div className="col-span-2"><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 p-2 text-sm" placeholder="例: 木造注文住宅の設計・施工" /></div>
            <div className="col-span-2"><label className="block text-sm font-bold text-[#1a365d] mt-3">対象とする役割・職種 *</label><input required name="targetRole" value={formData.targetRole} onChange={handleChange} className="mt-1 block w-full border border-[#4cb3d4]/40 rounded-md p-2 text-sm" placeholder="例: 工務店の店舗設計・デザイン担当"/></div>
            
            <div className="col-span-2 p-4 bg-slate-50 rounded border border-slate-200">
              <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の業務一覧を貼り付けてください。</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:border-[#4cb3d4] outline-none mb-2" placeholder="ここにテキストをペースト..." />
              <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-white hover:bg-slate-100 border border-slate-300 px-3 py-1.5 rounded"><UploadCloud className="w-4 h-4 mr-1" /> CSV/TXT読み込み</button>
              </div>
            </div>

            <div className="col-span-2"><label className="flex items-center font-bold text-[#1a365d]"><input type="checkbox" checked={generateTemplate} onChange={(e) => setGenerateTemplate(e.target.checked)} className="mr-2 w-4 h-4" />AIで「業務の叩き台」を自動生成する</label></div>
          </div>
          <button type="submit" className="w-full bg-[#1a365d] text-white py-3 rounded-md font-bold text-sm hover:bg-[#12284b] transition-colors">設定を保存して進む</button>
        </form>
      )}
    </div>
  );
};

const DashboardView = ({ setCurrentPath }) => (
  <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 p-10 flex flex-col md:flex-row items-center gap-8">
      <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="flex-1 z-10">
        <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/>業務を分解し、ボトルネックを特定し、「整理・再配置・委託・育成」の<br/>打ち手を比較検討した上で、本当に必要な能力・ペルソナを設計します。</p>
        <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>
  </div>
);


// ==========================================
// 1. 業務分解 (AnalysisView) - 3階層対応
// ==========================================
const AnalysisView = ({ user, categories, processes, tasks }) => {
  const [newCatName, setNewCatName] = useState('');
  const sortedCategories = useMemo(() => [...categories].sort((a, b) => (a.order || 0) - (b.order || 0)), [categories]);

  const addCategory = async () => {
    if (!newCatName.trim()) return;
    const maxOrder = categories.length > 0 ? Math.max(...categories.map((c, i) => c.order !== undefined ? c.order : i)) : 0;
    await setDoc(doc(collection(db, 'artifacts', appId, 'users', user.uid, 'categories')), { name: newCatName.trim(), order: maxOrder + 1, createdAt: serverTimestamp() });
    setNewCatName('');
  };

  const deleteCategory = async (catId) => {
    if(confirm("この大項目と、紐づくすべての中項目・小項目が削除されます。よろしいですか？")) {
       await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'categories', catId));
    }
  };

  return (
    <div className="space-y-6">
      <div className="mb-6"><h2 className="text-2xl font-bold text-slate-800 mb-2">1. 業務分解 (大・中・小項目)</h2><p className="text-slate-600 text-sm">部署の業務を「大項目(カテゴリー)」「中項目(プロセス)」「小項目(タスク)」の3階層に分解します。</p></div>
      <div className="bg-white p-5 rounded-lg border border-slate-200 shadow-sm flex items-center space-x-4 mb-6">
        <input type="text" placeholder="新しい大項目名を入力 (例: 経理・会計)" className="flex-1 px-4 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-[#4cb3d4] outline-none text-sm font-bold" value={newCatName} onChange={(e) => setNewCatName(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && addCategory()} />
        <button onClick={addCategory} className="bg-slate-800 hover:bg-slate-900 text-white px-5 py-2 rounded-md font-bold text-sm flex items-center transition-colors"><Plus className="w-4 h-4 mr-2" /> 大項目を追加</button>
      </div>

      <div className="space-y-6">
        {sortedCategories.length === 0 && <div className="text-center py-12 bg-slate-50 border-2 border-dashed border-slate-200 rounded-lg text-slate-500">まだ大項目が登録されていません。上の入力欄から追加してください。</div>}
        {sortedCategories.map((category) => (
          <div key={category.id} className="bg-white rounded-xl border-2 border-slate-200 shadow-sm overflow-hidden">
            <div className="bg-slate-100 px-6 py-4 flex items-center justify-between border-b border-slate-200 group">
              <div className="flex items-center"><span className="bg-[#1a365d] text-white text-xs font-bold px-2 py-1 rounded mr-3 shadow-sm">大項目</span><h3 className="text-xl font-black text-slate-800">{category.name}</h3></div>
              <button onClick={() => deleteCategory(category.id)} className="opacity-0 group-hover:opacity-100 p-2 text-slate-400 hover:text-red-600 transition-all rounded-full hover:bg-red-50"><Trash2 className="w-5 h-5" /></button>
            </div>
            <div className="p-4 space-y-4 bg-slate-50/50"><ProcessSection user={user} categoryId={category.id} processes={processes.filter(p => p.categoryId === category.id)} tasks={tasks} /></div>
          </div>
        ))}
      </div>
    </div>
  );
};

const ProcessSection = ({ user, categoryId, processes, tasks }) => {
  const [newProcName, setNewProcName] = useState('');
  const [expandedProc, setExpandedProc] = useState(null);
  const sortedProcesses = useMemo(() => [...processes].sort((a, b) => (a.order || 0) - (b.order || 0)), [processes]);

  const addProcess = async () => {
    if (!newProcName.trim()) return;
    const maxOrder = processes.length > 0 ? Math.max(...processes.map((p, i) => p.order !== undefined ? p.order : i)) : 0;
    await setDoc(doc(collection(db, 'artifacts', appId, 'users', user.uid, 'processes')), { categoryId, name: newProcName.trim(), order: maxOrder + 1, createdAt: serverTimestamp() });
    setNewProcName('');
  };

  return (
    <div className="space-y-3">
      {sortedProcesses.map((proc) => <ProcessCard key={proc.id} process={proc} tasks={tasks.filter(t => t.processId === proc.id)} user={user} isExpanded={expandedProc === proc.id} onToggle={() => setExpandedProc(expandedProc === proc.id ? null : proc.id)} />)}
      <div className="flex items-center space-x-3 mt-2 pl-2">
        <div className="w-5 h-5 border-l-2 border-b-2 border-slate-300 rounded-bl-lg shrink-0"></div>
        <input type="text" placeholder="中項目を追加 (例: 売上管理)" className="flex-1 px-3 py-2 border border-slate-300 rounded focus:border-[#4cb3d4] outline-none text-sm" value={newProcName} onChange={(e) => setNewProcName(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && addProcess()} />
        <button onClick={addProcess} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded text-sm font-bold transition-colors">中項目を追加</button>
      </div>
    </div>
  );
};

const ProcessCard = ({ process, tasks, user, isExpanded, onToggle }) => {
  const [newTaskName, setNewTaskName] = useState('');
  const [suggestedTasks, setSuggestedTasks] = useState([]);
  const [isSuggesting, setIsSuggesting] = useState(false);
  const sortedTasks = useMemo(() => [...tasks].sort((a, b) => (a.order || 0) - (b.order || 0)), [tasks]);

  const fetchSuggestions = async () => {
    setIsSuggesting(true);
    const suggestions = await generateTaskSuggestions(process.name, sortedTasks);
    setSuggestedTasks(suggestions.filter(s => !sortedTasks.some(t => t.name === s)));
    setIsSuggesting(false);
  };

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

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

  return (
    <div className="bg-white rounded-lg border border-slate-200 shadow-sm transition-all group/proc">
      <div className="px-5 py-3 flex items-center justify-between cursor-pointer hover:bg-slate-50" onClick={onToggle}>
        <div className="flex items-center"><ChevronRight className={`w-4 h-4 text-slate-400 mr-2 transition-transform ${isExpanded ? 'rotate-90' : ''}`} /><span className="text-xs font-bold text-slate-400 border border-slate-200 rounded px-1.5 py-0.5 mr-2">中項目</span><h4 className="text-base font-bold text-slate-800">{process.name}</h4></div>
        <div className="text-xs text-slate-500 bg-slate-100 px-2.5 py-1 rounded-full font-medium">{tasks.length} 小項目(タスク)</div>
      </div>
      {isExpanded && (
        <div className="px-6 pb-5 pt-1 border-t border-slate-100">
          <div className="space-y-1.5 mb-4 mt-2">
            {sortedTasks.length === 0 ? <p className="text-xs text-slate-400 italic py-2">小項目がありません。</p> : sortedTasks.map((task) => (
                <div key={task.id} className="bg-white p-2.5 rounded border border-slate-200 flex items-center justify-between text-sm shadow-sm group/task ml-4">
                  <div className="flex items-center"><div className="w-1.5 h-1.5 rounded-full bg-[#4cb3d4] mr-3"></div><span className="text-slate-700 font-medium">{task.name}</span></div>
                  <button onClick={(e) => deleteTask(task.id, e)} className="opacity-0 group-hover/task:opacity-100 p-1 text-slate-400 hover:text-red-600 rounded"><Trash2 className="w-4 h-4" /></button>
                </div>
              ))}
          </div>
          {isSuggesting && <div className="flex items-center text-xs text-[#4cb3d4] mb-3 ml-5"><Loader2 className="w-3 h-3 mr-1 animate-spin" /> AIが予測中...</div>}
          {!isSuggesting && suggestedTasks.length > 0 && (
            <div className="mb-4 space-y-2 ml-5">
              <div className="text-xs font-semibold text-[#4cb3d4] flex items-center"><Sparkles className="w-3 h-3 mr-1" /> AI提案（クリックで追加）</div>
              <div className="flex flex-wrap gap-2">{suggestedTasks.map((s, idx) => <button key={idx} onClick={() => addTask(s)} className="text-xs bg-[#4cb3d4]/10 hover:bg-[#4cb3d4]/20 text-[#1a365d] px-3 py-1.5 rounded-full"><Plus className="w-3 h-3 inline mr-1" />{s}</button>)}</div>
            </div>
          )}
          <div className="flex items-center space-x-2 mt-2 ml-4">
            <input type="text" placeholder="小項目を追加" className="flex-1 px-3 py-2 border border-slate-300 rounded focus:border-[#4cb3d4] outline-none text-sm" value={newTaskName} onChange={(e) => setNewTaskName(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && addTask()} />
            <button onClick={fetchSuggestions} disabled={isSuggesting} className="bg-[#4cb3d4]/10 text-[#1a365d] px-3 py-2 rounded text-sm font-bold flex items-center"><Sparkles className="w-4 h-4 mr-1" /> AI提案</button>
            <button onClick={addTask} className="bg-slate-800 text-white px-4 py-2 rounded text-sm font-bold">追加</button>
          </div>
        </div>
      )}
    </div>
  );
};

// ==========================================
// 2. ボトルネック特定 (BottleneckView)
// ==========================================
const EXECUTION_LEVELS = [ { val: '', label: '-' }, { val: '5', label: '5: 最適化' }, { val: '4', label: '4: 安定的' }, { val: '3', label: '3: 非効率' }, { val: '2', label: '2: 停滞気味' }, { val: '1', label: '1: 機能不全' } ];
const BOTTLENECK_FACTORS = [ { val: '', label: '-' }, { val: 'A', label: 'A: 才能ミスマッチ' }, { val: 'B', label: 'B: リソース不足' }, { val: 'C', label: 'C: スキル不足' }, { val: 'D', label: 'D: 仕組みの不在' } ];
const MANUAL_STATUS = [ { val: '', label: '-' }, { val: '可', label: '可' }, { val: '否', label: '否' }, { val: '済み', label: '済み' } ];

const BottleneckView = ({ user, categories, processes, tasks, bottlenecks, setCurrentPath }) => {
  const [expandedTaskId, setExpandedTaskId] = useState(null);
  const [showSettings, setShowSettings] = useState(false);
  const [visibleCols, setVisibleCols] = useState({ avgTimePerCase: true, avgTimePerDay: true, frequency: true, manualStatus: true, requiredSkills: true, importance: true, difficulty: true, executionLevel: true, bottleneckFactor: true, score: true });
  const toggleCol = (colKey) => setVisibleCols(prev => ({ ...prev, [colKey]: !prev[colKey] }));

  const structuredData = useMemo(() => {
    const sortedCats = [...categories].sort((a,b) => (a.order||0) - (b.order||0));
    if (processes.some(p => !p.categoryId)) sortedCats.push({ id: 'uncategorized', name: '未分類' });
    return sortedCats.map(cat => {
      const catProcs = processes.filter(p => cat.id === 'uncategorized' ? !p.categoryId : p.categoryId === cat.id);
      const sortedProcs = [...catProcs].sort((a,b) => (a.order||0) - (b.order||0));
      const procsWithTasks = sortedProcs.map(p => {
        const pTasks = tasks.filter(t => t.processId === p.id);
        const sortedTasks = [...pTasks].sort((a,b) => (a.order||0) - (b.order||0));
        return { ...p, tasks: sortedTasks };
      }).filter(p => p.tasks.length > 0);
      return { ...cat, processes: procsWithTasks };
    }).filter(c => c.processes.length > 0);
  }, [categories, processes, tasks]);

  return (
    <div className="space-y-4 flex flex-col h-[calc(100vh-10rem)]">
      <div className="flex justify-between items-end shrink-0">
        <div><h2 className="text-2xl font-bold text-slate-800 mb-2">2. ボトルネック特定</h2><p className="text-slate-600 text-sm">タスクの属性を一覧で評価し、理由を言語化して組織の真のボトルネックを特定します。</p></div>
        <div className="relative">
          <button onClick={() => setShowSettings(!showSettings)} className="bg-white border border-slate-300 px-4 py-2 rounded-lg text-sm font-bold flex items-center shadow-sm"><Settings2 className="w-4 h-4 mr-2" /> 列表示設定</button>
          {showSettings && (
            <div className="absolute right-0 mt-2 w-80 bg-white border border-slate-200 shadow-xl rounded-xl p-4 z-50">
              <h4 className="text-sm font-bold text-slate-800 mb-3 border-b pb-2">表示する項目</h4>
              <div className="grid grid-cols-2 gap-2 text-sm">
                {Object.keys(visibleCols).map(k => k !== 'score' && <label key={k} className="flex items-center space-x-2"><input type="checkbox" checked={visibleCols[k]} onChange={() => toggleCol(k)} className="rounded" /><span>{k}</span></label>)}
              </div>
              <button onClick={() => setShowSettings(false)} className="mt-4 w-full bg-slate-100 py-2 rounded text-sm font-bold">閉じる</button>
            </div>
          )}
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-200 flex-1 flex flex-col overflow-hidden relative">
        <div className="flex-1 overflow-auto w-full relative custom-scrollbar">
          <div className="min-w-max">
            <div className="flex bg-[#1a365d] text-white text-xs font-bold sticky top-0 z-30 shadow-md">
              <div className="w-80 shrink-0 p-3 sticky left-0 bg-[#1a365d] z-40 border-r border-[#12284b]">大項目 &gt; 中項目 / 小項目名</div>
              {visibleCols.frequency && <div className="w-24 shrink-0 p-3 border-r border-[#12284b]/50 text-center">頻度</div>}
              {visibleCols.avgTimePerCase && <div className="w-24 shrink-0 p-3 border-r border-[#12284b]/50 text-center">1案件工数</div>}
              {visibleCols.avgTimePerDay && <div className="w-24 shrink-0 p-3 border-r border-[#12284b]/50 text-center">1日工数</div>}
              {visibleCols.manualStatus && <div className="w-24 shrink-0 p-3 border-r border-[#12284b]/50 text-center">マニュアル化</div>}
              {visibleCols.requiredSkills && <div className="w-40 shrink-0 p-3 border-r border-[#12284b]/50 text-center">必要資格・スキル</div>}
              {visibleCols.importance && <div className="w-28 shrink-0 p-3 border-r border-[#12284b]/50 text-center">重要度</div>}
              {visibleCols.difficulty && <div className="w-32 shrink-0 p-3 border-r border-[#12284b]/50 text-center">難易度</div>}
              {visibleCols.executionLevel && <div className="w-48 shrink-0 p-3 border-r border-[#12284b]/50 text-center">推奨・実行レベル</div>}
              {visibleCols.bottleneckFactor && <div className="w-48 shrink-0 p-3 border-r border-[#12284b]/50 text-center">ボトルネック要因</div>}
              <div className="w-36 shrink-0 p-3 sticky right-12 bg-[#1a365d] z-40 border-l border-[#12284b] text-center">総合影響度</div>
              <div className="w-12 shrink-0 p-3 sticky right-0 bg-[#1a365d] z-40 border-l border-[#12284b] text-center">理由</div>
            </div>

            {structuredData.map(category => (
              <React.Fragment key={category.id}>
                <div className="flex w-full min-h-[2.5rem] bg-slate-200/80 border-b border-slate-300">
                  <div className="w-80 shrink-0 p-2 pl-4 sticky left-0 bg-slate-200/80 z-20 border-r border-slate-300 flex items-center"><Layers className="w-4 h-4 mr-2 text-[#1a365d]" /> <span className="text-sm font-black text-[#1a365d] truncate">【大項目】{category.name}</span></div>
                </div>
                {category.processes.map(process => (
                  <React.Fragment key={process.id}>
                    <div className="flex w-full min-h-[2.5rem] bg-slate-100/90 border-b border-slate-200">
                      <div className="w-80 shrink-0 p-2 pl-8 sticky left-0 bg-slate-100/90 z-20 border-r border-slate-200 flex items-center"><ChevronRight className="w-4 h-4 mr-1 text-slate-400" /> <span className="text-sm font-bold text-slate-700 truncate">【中項目】{process.name}</span></div>
                    </div>
                    {process.tasks.map(task => {
                      const bNeck = bottlenecks.find(b => b.taskId === task.id);
                      return <BottleneckDataRow key={task.id} user={user} task={task} existingData={bNeck} visibleCols={visibleCols} isExpanded={expandedTaskId === task.id} onToggle={() => setExpandedTaskId(expandedTaskId === task.id ? null : task.id)} onNext={() => setCurrentPath('decision')} />;
                    })}
                  </React.Fragment>
                ))}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const BottleneckDataRow = ({ user, task, existingData, visibleCols, isExpanded, onToggle, onNext }) => {
  const [formData, setFormData] = useState({ avgTimePerCase: '', avgTimePerDay: '', frequency: '', manualStatus: '', requiredSkills: '', importance: 'medium', difficulty: 'months', executionLevel: '', bottleneckFactor: '', score: 3, reason: '' });
  const [isSaving, setIsSaving] = useState(false);
  const [saveIndicator, setSaveIndicator] = useState(false);

  useEffect(() => { if (existingData) setFormData(prev => ({ ...prev, ...existingData })); }, [existingData]);

  const saveToFirestore = async (updates) => {
    setIsSaving(true);
    const id = existingData?.id || `bn_${task.id}`;
    await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'bottlenecks', id), { taskId: task.id, taskName: task.name, ...formData, ...updates, updatedAt: serverTimestamp() }, { merge: true });
    setIsSaving(false); setSaveIndicator(true); setTimeout(() => setSaveIndicator(false), 2000);
  };

  const handleChange = (field, value) => { setFormData(prev => ({ ...prev, [field]: value })); if (['importance', 'difficulty', 'executionLevel', 'bottleneckFactor', 'score', 'manualStatus'].includes(field)) saveToFirestore({ [field]: value }); };
  const handleBlur = (field, value) => saveToFirestore({ [field]: value });

  const scoreColor = formData.score >= 4 ? 'bg-red-50 text-red-700 border-red-200' : formData.score <= 2 ? 'bg-slate-100 text-slate-500 border-slate-200' : 'bg-orange-50 text-orange-700 border-orange-200';
  const getExecColor = (level) => level === '5' || level === '4' ? 'bg-red-50 text-red-700' : level === '3' ? 'bg-orange-50 text-orange-700' : level === '2' || level === '1' ? 'bg-blue-50 text-blue-700' : '';

  return (
    <div className={`flex flex-col border-b border-slate-200 transition-colors hover:bg-slate-50/80 ${isExpanded ? 'bg-blue-50/30' : ''}`}>
      <div className="flex w-full items-stretch min-h-[3.5rem]">
        <div className="w-80 shrink-0 p-3 sticky left-0 bg-white z-20 border-r border-slate-200 flex items-center cursor-pointer" onClick={onToggle}>
          <div className="pl-12 flex-1 text-sm font-bold text-slate-700 hover:text-[#4cb3d4] truncate">{task.name}</div>
        </div>
        {visibleCols.frequency && <div className="w-24 shrink-0 p-2 border-r border-slate-100 flex items-center"><input list="freqOptions" value={formData.frequency} onChange={e => handleChange('frequency', e.target.value)} onBlur={e => handleBlur('frequency', e.target.value)} className="w-full text-xs p-1.5 border border-transparent hover:border-slate-300 rounded focus:bg-white outline-none bg-transparent" placeholder="月次等" /></div>}
        {visibleCols.avgTimePerCase && <div className="w-24 shrink-0 p-2 border-r border-slate-100 flex items-center"><input type="text" value={formData.avgTimePerCase} onChange={e => handleChange('avgTimePerCase', e.target.value)} onBlur={e => handleBlur('avgTimePerCase', e.target.value)} className="w-full text-xs p-1.5 border border-transparent hover:border-slate-300 rounded focus:bg-white outline-none bg-transparent text-center" placeholder="30分等" /></div>}
        {visibleCols.avgTimePerDay && <div className="w-24 shrink-0 p-2 border-r border-slate-100 flex items-center"><input type="text" value={formData.avgTimePerDay} onChange={e => handleChange('avgTimePerDay', e.target.value)} onBlur={e => handleBlur('avgTimePerDay', e.target.value)} className="w-full text-xs p-1.5 border border-transparent hover:border-slate-300 rounded focus:bg-white outline-none bg-transparent text-center" placeholder="2時間等" /></div>}
        {visibleCols.manualStatus && <div className="w-24 shrink-0 p-2 border-r border-slate-100 flex items-center justify-center"><select value={formData.manualStatus} onChange={e => handleChange('manualStatus', e.target.value)} className="w-full text-xs p-1.5 border border-transparent hover:border-slate-300 rounded focus:bg-white outline-none bg-transparent cursor-pointer text-center">{MANUAL_STATUS.map(o => <option key={o.val} value={o.val}>{o.label}</option>)}</select></div>}
        {visibleCols.requiredSkills && <div className="w-40 shrink-0 p-2 border-r border-slate-100 flex items-center"><input type="text" value={formData.requiredSkills} onChange={e => handleChange('requiredSkills', e.target.value)} onBlur={e => handleBlur('requiredSkills', e.target.value)} className="w-full text-xs p-1.5 border border-transparent hover:border-slate-300 rounded focus:bg-white outline-none bg-transparent" placeholder="資格・スキル" /></div>}
        {visibleCols.importance && <div className="w-28 shrink-0 p-2 border-r border-slate-100 flex items-center"><select value={formData.importance} onChange={e => handleChange('importance', e.target.value)} className="w-full text-xs p-1.5 border border-transparent hover:border-slate-300 rounded focus:bg-white outline-none bg-transparent cursor-pointer"><option value="low">低</option><option value="medium">中</option><option value="high">高</option></select></div>}
        {visibleCols.difficulty && <div className="w-32 shrink-0 p-2 border-r border-slate-100 flex items-center"><select value={formData.difficulty} onChange={e => handleChange('difficulty', e.target.value)} className="w-full text-xs p-1.5 border border-transparent hover:border-slate-300 rounded focus:bg-white outline-none bg-transparent cursor-pointer"><option value="days">数日</option><option value="months">3ヶ月</option><option value="year">1年</option><option value="years">3年</option></select></div>}
        {visibleCols.executionLevel && <div className="w-48 shrink-0 p-2 border-r border-slate-100 flex items-center"><select value={formData.executionLevel} onChange={e => handleChange('executionLevel', e.target.value)} className={`w-full text-[10px] p-1.5 border border-transparent hover:border-slate-300 rounded focus:bg-white outline-none cursor-pointer ${getExecColor(formData.executionLevel)}`}>{EXECUTION_LEVELS.map(o => <option key={o.val} value={o.val}>{o.label}</option>)}</select></div>}
        {visibleCols.bottleneckFactor && <div className="w-48 shrink-0 p-2 border-r border-slate-100 flex items-center"><select value={formData.bottleneckFactor} onChange={e => handleChange('bottleneckFactor', e.target.value)} className="w-full text-[10px] p-1.5 border border-transparent hover:border-slate-300 rounded focus:bg-white outline-none bg-transparent cursor-pointer">{BOTTLENECK_FACTORS.map(o => <option key={o.val} value={o.val}>{o.label}</option>)}</select></div>}
        
        <div className="w-36 shrink-0 p-2 sticky right-12 bg-white z-20 border-l border-slate-200 flex justify-center items-center">
          <div className="relative w-full px-1"><select value={formData.score} onChange={e => handleChange('score', Number(e.target.value))} className={`w-full text-xs py-1.5 pl-2 pr-6 border rounded outline-none cursor-pointer font-bold appearance-none ${scoreColor}`}><option value={1}>1 (問題なし)</option><option value={2}>2 (やや影響)</option><option value={3}>3 (非効率)</option><option value={4}>4 (重大)</option><option value={5}>5 (致命的)</option></select><ChevronDown className="w-3 h-3 absolute right-2.5 top-1/2 -translate-y-1/2 opacity-50 pointer-events-none" /></div>
        </div>
        <div className="w-12 shrink-0 p-2 sticky right-0 bg-white z-20 border-l border-slate-100 flex justify-center items-center cursor-pointer" onClick={onToggle}>
          <div className={`p-1.5 rounded-full ${isExpanded ? 'bg-[#1a365d] text-white' : 'text-slate-400 hover:bg-slate-200 hover:text-[#1a365d]'}`}>{isExpanded ? <ChevronDown className="w-4 h-4" /> : <FileText className="w-4 h-4" />}</div>
        </div>
      </div>
      {isExpanded && (
        <div className="sticky left-0 w-full p-4 border-t border-slate-200 bg-slate-50/80 shadow-inner z-10 animate-in fade-in">
          <div className="max-w-4xl mx-auto bg-white rounded-xl border border-slate-200 shadow-sm p-5">
            <div className="flex justify-between items-center mb-3">
               <label className="text-sm font-bold text-[#1a365d] flex items-center"><Lightbulb className="w-4 h-4 mr-1 text-[#4cb3d4]" />なぜこの影響度なのか？ (理由・課題の言語化)</label>
               {saveIndicator && <span className="text-xs font-bold text-emerald-600"><CheckCircle className="w-3 h-3 inline mr-1" />保存済</span>}
            </div>
            <textarea className="w-full border border-slate-300 rounded-lg p-3 text-sm focus:ring-2 focus:ring-[#4cb3d4] outline-none min-h-[100px] resize-none" placeholder="理由を入力..." value={formData.reason} onChange={(e) => setFormData(prev => ({ ...prev, reason: e.target.value }))} onBlur={(e) => handleBlur('reason', e.target.value)}></textarea>
            <div className="flex justify-between items-center mt-3">
              <div className="text-xs text-slate-400">※テキスト枠からフォーカスが外れると自動保存されます。</div>
              {formData.score >= 3 && <button onClick={onNext} className="bg-[#1a365d] text-white px-4 py-2 rounded font-bold text-xs flex items-center">打ち手を比較 <ArrowRight className="w-3 h-3 ml-1" /></button>}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};


// ==========================================
// 3. 打ち手比較 (DecisionView)
// ==========================================
const DECISION_STEPS = [
  { id: 'sort', label: '1. 整理', desc: '無くす・自動化', color: 'bg-blue-500', text: 'text-blue-700', border: 'border-blue-200', bgL: 'bg-blue-50' },
  { id: 'reassign', label: '2. 再配置', desc: '社内の別担当へ', color: 'bg-cyan-500', text: 'text-cyan-700', border: 'border-cyan-200', bgL: 'bg-cyan-50' },
  { id: 'outsource', label: '3. 委託', desc: '外部ツール・BPO', color: 'bg-teal-500', text: 'text-teal-700', border: 'border-teal-200', bgL: 'bg-teal-50' },
  { id: 'train', label: '4. 育成', desc: '既存社員の教育', color: 'bg-emerald-500', text: 'text-emerald-700', border: 'border-emerald-200', bgL: 'bg-emerald-50' },
  { id: 'recruit', label: '5. 採用', desc: '最終手段として', color: 'bg-[#1a365d]', text: 'text-[#1a365d]', border: 'border-[#1a365d]/30', bgL: 'bg-[#1a365d]/5' },
];

const DecisionView = ({ user, categories, processes, tasks, bottlenecks, decisions }) => {
  const [expandedTaskId, setExpandedTaskId] = useState(null);

  const structuredData = useMemo(() => {
    const targetTaskIds = new Set(bottlenecks.filter(b => b.score >= 3).map(b => b.taskId));
    if (targetTaskIds.size === 0) return [];
    const sortedCats = [...categories].sort((a,b) => (a.order||0) - (b.order||0));
    if (processes.some(p => !p.categoryId)) sortedCats.push({ id: 'uncategorized', name: '未分類' });
    return sortedCats.map(cat => {
      const catProcs = processes.filter(p => cat.id === 'uncategorized' ? !p.categoryId : p.categoryId === cat.id);
      const sortedProcs = [...catProcs].sort((a,b) => (a.order||0) - (b.order||0));
      const procsWithTasks = sortedProcs.map(p => {
        const pTasks = tasks.filter(t => t.processId === p.id && targetTaskIds.has(t.id));
        const sortedTasks = [...pTasks].sort((a,b) => (a.order||0) - (b.order||0));
        return { ...p, tasks: sortedTasks };
      }).filter(p => p.tasks.length > 0);
      return { ...cat, processes: procsWithTasks };
    }).filter(c => c.processes.length > 0);
  }, [categories, processes, tasks, bottlenecks]);

  return (
    <div className="space-y-4 flex flex-col h-[calc(100vh-10rem)]">
      <div className="flex justify-between items-end shrink-0">
        <div><h2 className="text-2xl font-bold text-slate-800 mb-2">3. 打ち手比較 (Action Decision)</h2><p className="text-slate-600 text-sm">対象タスクを一望し、採用・外注のコスト比較等を行いながら「真の打ち手」を決定します。</p></div>
      </div>
      {structuredData.length === 0 ? (
        <div className="bg-white p-8 rounded-xl border border-slate-200 text-center text-slate-500">比較対象のボトルネックがありません。「2. ボトルネック特定」で影響度3以上のタスクを設定してください。</div>
      ) : (
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 flex-1 flex flex-col overflow-hidden relative">
          <div className="flex-1 overflow-auto w-full relative custom-scrollbar">
            <div className="min-w-max">
              <div className="flex bg-[#1a365d] text-white text-xs font-bold sticky top-0 z-30 shadow-md">
                <div className="w-80 shrink-0 p-3 sticky left-0 bg-[#1a365d] z-40 border-r border-[#12284b] flex items-center">大項目 &gt; 中項目 / 対象タスク名</div>
                <div className="w-24 shrink-0 p-3 border-r border-[#12284b]/50 text-center">影響度</div>
                <div className="w-80 shrink-0 p-3 border-r border-[#12284b]/50">課題認識(理由)</div>
                <div className="w-48 shrink-0 p-3 border-r border-[#12284b]/50 text-center">現在の打ち手状況</div>
                <div className="w-12 shrink-0 p-3 sticky right-0 bg-[#1a365d] z-40 border-l border-[#12284b] text-center shadow-[-4px_0_10px_rgba(0,0,0,0.1)]">詳細</div>
              </div>
              {structuredData.map(category => (
                <React.Fragment key={category.id}>
                  <div className="flex w-full min-h-[2.5rem] bg-slate-200/80 border-b border-slate-300 group">
                    <div className="w-80 shrink-0 p-2 pl-4 sticky left-0 bg-slate-200/80 z-20 border-r border-slate-300 flex items-center shadow-[2px_0_5px_rgba(0,0,0,0.02)]">
                      <Layers className="w-4 h-4 mr-2 text-[#1a365d]" /> <span className="text-sm font-black text-[#1a365d] truncate">【大項目】{category.name}</span>
                    </div>
                  </div>
                  {category.processes.map(process => (
                    <React.Fragment key={process.id}>
                      <div className="flex w-full min-h-[2.5rem] bg-slate-100/90 border-b border-slate-200 group">
                        <div className="w-80 shrink-0 p-2 pl-8 sticky left-0 bg-slate-100/90 z-20 border-r border-slate-200 flex items-center shadow-[2px_0_5px_rgba(0,0,0,0.02)]">
                          <ChevronRight className="w-4 h-4 mr-1 text-slate-400" /> <span className="text-sm font-bold text-slate-700 truncate">【中項目】{process.name}</span>
                        </div>
                      </div>
                      {process.tasks.map(task => {
                        const bottleneck = bottlenecks.find(b => b.taskId === task.id);
                        const decision = decisions.find(d => d.bottleneckId === bottleneck?.id);
                        return <DecisionDataRow key={task.id} user={user} task={task} bottleneck={bottleneck} existingData={decision} isExpanded={expandedTaskId === task.id} onToggle={() => setExpandedTaskId(expandedTaskId === task.id ? null : task.id)} />;
                      })}
                    </React.Fragment>
                  ))}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

const DecisionDataRow = ({ user, task, bottleneck, existingData, isExpanded, onToggle }) => {
  const [notes, setNotes] = useState(existingData?.notes || { sort: '', reassign: '', outsource: '', train: '', recruit: '' });
  const [finalDecision, setFinalDecision] = useState(existingData?.finalDecision || null);
  const [simulation, setSimulation] = useState(existingData?.simulation || { casesPerMonth: '', revenuePerCase: '', marginRate: '30', outsourceCost: '', recruitCost: '' });
  const [aiHints, setAiHints] = useState({});
  const [loadingAiMap, setLoadingAiMap] = useState({});
  const [isSaving, setIsSaving] = useState(false);
  const [saveSuccess, setSaveSuccess] = useState(false);

  useEffect(() => {
    if (existingData) {
      setNotes(existingData.notes || { sort: '', reassign: '', outsource: '', train: '', recruit: '' });
      setFinalDecision(existingData.finalDecision || null);
      if(existingData.simulation) setSimulation(existingData.simulation);
    }
  }, [existingData]);

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

  const fetchHint = async (stepId) => {
    setLoadingAiMap(prev => ({...prev, [stepId]: true}));
    const hint = await generateAIHint(task.name, bottleneck?.reason || '', stepId);
    setAiHints(prev => ({ ...prev, [stepId]: hint }));
    setLoadingAiMap(prev => ({...prev, [stepId]: false}));
  };

  const handleSave = async (auto = false, overrideDecision = null) => {
    if (!auto) setIsSaving(true);
    const id = existingData?.id || `dec_${bottleneck.id}`;
    await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'decisions', id), { bottleneckId: bottleneck.id, notes, simulation, finalDecision: overrideDecision !== null ? overrideDecision : finalDecision, updatedAt: serverTimestamp() }, { merge: true });
    if (!auto) { setIsSaving(false); setSaveSuccess(true); setTimeout(() => setSaveSuccess(false), 3000); }
  };

  const cases = Number(simulation.casesPerMonth) || 0; const rev = Number(simulation.revenuePerCase) || 0; const margin = Number(simulation.marginRate) || 0;
  const grossProfit = cases * rev * (margin / 100);
  const outCost = Number(simulation.outsourceCost) || 0; const recCost = Number(simulation.recruitCost) || 0;

  let simResult = null;
  if (grossProfit > 0 && (outCost > 0 || recCost > 0)) {
    if (grossProfit < outCost && grossProfit < recCost) simResult = { type: 'alert', text: `赤字警告: 想定粗利(${grossProfit.toFixed(1)}万円)に対してコスト超過。整理や自動化を再検討してください。`, color: 'text-red-600 bg-red-50 border-red-200' };
    else if (outCost > 0 && recCost > 0) {
      if (outCost < recCost) simResult = { type: 'outsource', text: `委託有利: 採用より外注・委託のほうが月額 ${(recCost - outCost).toFixed(1)}万円 コストを抑えられます。`, color: 'text-teal-700 bg-teal-50 border-teal-200' };
      else if (outCost > recCost) simResult = { type: 'recruit', text: `採用有利: 委託より採用のほうが月額 ${(outCost - recCost).toFixed(1)}万円 コストを抑えられます。`, color: 'text-[#1a365d] bg-blue-50 border-blue-200' };
      else simResult = { type: 'equal', text: `コスト同等: 委託と採用のコストは同等です。品質や柔軟性の観点から判断してください。`, color: 'text-slate-700 bg-slate-50 border-slate-200' };
    }
  }

  const currentDecisionObj = DECISION_STEPS.find(s => s.id === finalDecision);

  return (
    <div className={`flex flex-col border-b border-slate-200 transition-colors group ${isExpanded ? 'bg-indigo-50/20' : 'hover:bg-slate-50/80'}`}>
      <div className="flex w-full items-stretch min-h-[3.5rem] cursor-pointer" onClick={onToggle}>
        <div className="w-80 shrink-0 p-3 sticky left-0 bg-white group-hover:bg-slate-50/90 z-20 border-r border-slate-200 flex items-center">
          <div className="pl-12 flex-1 text-sm font-bold text-slate-700 hover:text-[#4cb3d4] truncate transition-colors">{task.name}</div>
        </div>
        <div className="w-24 shrink-0 p-2 border-r border-slate-100 flex items-center justify-center">
           <span className={`text-xs px-2 py-0.5 rounded font-bold ${bottleneck?.score >= 4 ? 'bg-red-100 text-red-700' : 'bg-orange-100 text-orange-700'}`}>影響度: {bottleneck?.score || '-'}</span>
        </div>
        <div className="w-80 shrink-0 p-3 border-r border-slate-100 flex items-center">
          <span className="text-xs text-slate-500 truncate">{bottleneck?.reason || '（未入力）'}</span>
        </div>
        <div className="w-48 shrink-0 p-2 border-r border-slate-100 flex items-center justify-center">
          {currentDecisionObj ? ( <span className={`text-xs font-bold px-3 py-1 rounded-full border ${currentDecisionObj.bgL} ${currentDecisionObj.text} ${currentDecisionObj.border} flex items-center`}><Check className="w-3 h-3 mr-1" /> {currentDecisionObj.label} 決着</span> ) : ( <span className="text-xs font-medium text-slate-400 bg-slate-100 px-3 py-1 rounded-full">未決着</span> )}
        </div>
        <div className="w-12 shrink-0 p-2 sticky right-0 bg-white group-hover:bg-slate-50/90 z-20 border-l border-slate-100 flex justify-center items-center shadow-[-4px_0_10px_rgba(0,0,0,0.03)]">
          <div className={`p-1.5 rounded-full transition-colors ${isExpanded ? 'bg-[#1a365d] text-white' : 'text-slate-400 hover:bg-slate-200 hover:text-[#1a365d]'}`}>{isExpanded ? <ChevronDown className="w-4 h-4" /> : <GitCompare className="w-4 h-4" />}</div>
        </div>
      </div>
      {isExpanded && (
        <div className="sticky left-0 w-full p-6 border-t border-slate-200 bg-slate-50/80 shadow-inner z-10 animate-in fade-in">
          <div className="max-w-5xl mx-auto flex flex-col gap-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
              {DECISION_STEPS.map(step => (
                <div key={step.id} className={`bg-white rounded-xl border ${step.border} p-4 shadow-sm flex flex-col h-[220px]`}>
                  <div className="flex justify-between items-start mb-2">
                    <div><h4 className={`text-sm font-bold ${step.text}`}>{step.label}</h4><p className="text-[10px] text-slate-500 mt-0.5">{step.desc}</p></div>
                    <button onClick={() => fetchHint(step.id)} disabled={loadingAiMap[step.id]} className={`p-1.5 rounded-full ${step.bgL} ${step.text} hover:opacity-70`} title="AIヒント">{loadingAiMap[step.id] ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Sparkles className="w-3.5 h-3.5" />}</button>
                  </div>
                  {aiHints[step.id] && <div className={`text-[10px] p-2 mb-2 rounded ${step.bgL} ${step.text} max-h-16 overflow-y-auto border ${step.border}`}>{aiHints[step.id]}</div>}
                  <textarea className="flex-1 w-full border border-slate-200 rounded p-2 text-xs focus:ring-1 outline-none resize-none bg-slate-50 focus:bg-white" placeholder="検討メモ..." value={notes[step.id]} onChange={(e) => updateNote(step.id, e.target.value)} onBlur={() => handleSave(true)}></textarea>
                </div>
              ))}
            </div>
            <div className="flex flex-col lg:flex-row gap-6">
              <div className="flex-1 bg-white rounded-xl border border-[#4cb3d4]/30 shadow-sm overflow-hidden">
                <div className="bg-[#4cb3d4]/10 px-5 py-3 border-b border-[#4cb3d4]/20 flex items-center"><Calculator className="w-4 h-4 text-[#1a365d] mr-2" /> <h4 className="text-sm font-bold text-[#1a365d]">採用 vs 委託(外注) ROIシミュレーター</h4></div>
                <div className="p-5">
                  <div className="grid grid-cols-3 gap-4 mb-4">
                    <div><label className="block text-[10px] font-bold text-slate-500 mb-1">月間想定案件数</label><div className="flex items-center"><input type="number" value={simulation.casesPerMonth} onChange={e => updateSim('casesPerMonth', e.target.value)} onBlur={() => handleSave(true)} className="w-full text-sm border-slate-300 rounded focus:ring-[#4cb3d4] outline-none text-right px-2 py-1.5" /><span className="text-xs text-slate-500 ml-1">件</span></div></div>
                    <div><label className="block text-[10px] font-bold text-slate-500 mb-1">1案件平均売上(万円)</label><div className="flex items-center"><input type="number" value={simulation.revenuePerCase} onChange={e => updateSim('revenuePerCase', e.target.value)} onBlur={() => handleSave(true)} className="w-full text-sm border-slate-300 rounded focus:ring-[#4cb3d4] outline-none text-right px-2 py-1.5" /></div></div>
                    <div><label className="block text-[10px] font-bold text-slate-500 mb-1">平均粗利率(%)</label><div className="flex items-center"><input type="number" value={simulation.marginRate} onChange={e => updateSim('marginRate', e.target.value)} onBlur={() => handleSave(true)} className="w-full text-sm border-slate-300 rounded focus:ring-[#4cb3d4] outline-none text-right px-2 py-1.5" /></div></div>
                  </div>
                  <div className="bg-slate-50 rounded-lg p-3 mb-6 border border-slate-200 flex justify-between items-center">
                    <span className="text-xs font-bold text-slate-600 flex items-center"><TrendingUp className="w-3 h-3 mr-1" />このタスクに関わる月間想定粗利</span><span className="text-lg font-black text-[#1a365d]">{grossProfit > 0 ? grossProfit.toFixed(1) : '---'} <span className="text-xs font-normal">万円</span></span>
                  </div>
                  <div className="grid grid-cols-2 gap-6">
                    <div className="border-t-2 border-teal-400 pt-3"><label className="block text-xs font-bold text-teal-700 mb-1">委託(外注) 想定月額コスト(万円)</label><input type="number" value={simulation.outsourceCost} onChange={e => updateSim('outsourceCost', e.target.value)} onBlur={() => handleSave(true)} className="w-full text-sm border-slate-300 rounded focus:ring-teal-500 outline-none text-right px-2 py-1.5" /></div>
                    <div className="border-t-2 border-[#1a365d] pt-3"><label className="block text-xs font-bold text-[#1a365d] mb-1">採用 想定月額コスト(万円)</label><input type="number" value={simulation.recruitCost} onChange={e => updateSim('recruitCost', e.target.value)} onBlur={() => handleSave(true)} className="w-full text-sm border-slate-300 rounded focus:ring-[#1a365d] outline-none text-right px-2 py-1.5" /></div>
                  </div>
                  {simResult && ( <div className={`mt-4 p-3 rounded-lg border text-xs font-bold flex items-start ${simResult.color}`}><DollarSign className="w-4 h-4 mr-1.5 shrink-0 mt-0.5" /><span className="leading-relaxed">{simResult.text}</span></div> )}
                </div>
              </div>
              <div className="w-full lg:w-80 bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col shrink-0">
                <h4 className="font-bold text-slate-800 mb-3 border-b border-slate-100 pb-2">最終結論の決定</h4>
                <div className="space-y-2 flex-1">
                  {DECISION_STEPS.map(step => (
                    <label key={`final-${step.id}`} className={`flex items-center p-2.5 rounded-lg border cursor-pointer transition-all ${finalDecision === step.id ? `border-${step.color.split('-')[1]}-500 ring-1 ring-${step.color.split('-')[1]}-500 ${step.bgL}` : 'border-slate-200 hover:bg-slate-50'}`}>
                      <input type="radio" name={`finalDecision-${task.id}`} value={step.id} checked={finalDecision === step.id} onChange={() => { setFinalDecision(step.id); handleSave(true, step.id); }} className="mr-3 text-[#1a365d] focus:ring-[#4cb3d4]" />
                      <span className={`font-bold text-xs ${finalDecision === step.id ? step.text : 'text-slate-600'}`}>{step.label}</span>
                    </label>
                  ))}
                </div>
                <div className="pt-4 mt-auto">
                  <button onClick={() => handleSave(false)} disabled={!finalDecision || isSaving} className={`w-full py-2.5 rounded-lg font-bold text-sm transition-all flex justify-center items-center shadow-sm ${finalDecision && !isSaving ? 'bg-[#1a365d] text-white 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-2 text-xs font-bold text-emerald-600 flex items-center justify-center"><CheckCircle className="w-3.5 h-3.5 mr-1" /> 保存完了</div> )}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// ==========================================
// 4. 能力・ペルソナ (CapabilityView & PersonaForm)
// ==========================================
const CapabilityView = ({ user, decisions, bottlenecks, tasks, personas }) => {
  const targetDecisions = decisions.filter(d => d.finalDecision === 'train' || d.finalDecision === 'recruit');
  const [selectedDecId, setSelectedDecId] = useState('persona'); 
  const selectedDecision = targetDecisions.find(d => d.id === selectedDecId);
  const selectedBn = bottlenecks.find(b => b.id === selectedDecision?.bottleneckId);
  const currentPersona = personas.find(p => p.id === 'current_role') || {};

  return (
    <div className="space-y-6 flex h-[calc(100vh-12rem)]">
      <div className="w-1/3 pr-6 border-r border-slate-200 flex flex-col h-full shrink-0">
        <div className="mb-4 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 custom-scrollbar">
          <div onClick={() => setSelectedDecId('persona')} className={`p-4 rounded-lg border cursor-pointer transition-all flex items-center ${selectedDecId === 'persona' ? 'border-[#1a365d] ring-1 ring-[#1a365d] bg-indigo-50/30 shadow-sm' : 'border-slate-300 bg-white hover:bg-slate-50'}`}>
            <Users className={`w-5 h-5 mr-3 ${selectedDecId === 'persona' ? 'text-[#1a365d]' : 'text-slate-400'}`} />
            <div><div className="text-[10px] font-bold text-slate-500 mb-0.5">全体まとめ</div><span className={`font-bold text-sm ${selectedDecId === 'persona' ? 'text-[#1a365d]' : 'text-slate-800'}`}>求める人物像 (ペルソナ設計)</span></div>
          </div>
          <div className="my-4 border-b border-dashed border-slate-300"></div>
          {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 isRecruit = dec.finalDecision === 'recruit';
              const hasData = dec.capabilities && (dec.capabilities.competencies.some(c=>c) || dec.capabilities.microSkills.some(m=>m));
              return (
                <div key={dec.id} onClick={() => setSelectedDecId(dec.id)} className={`p-4 rounded-lg border cursor-pointer transition-all ${selectedDecId === dec.id ? `border-[#4cb3d4] ring-1 ring-[#4cb3d4] 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>{hasData && <CheckCircle className="w-3.5 h-3.5 text-emerald-500" />}</div>
                  <span className="font-bold text-slate-800 text-sm leading-snug line-clamp-2">{bn?.taskName || "不明なタスク"}</span>
                </div>
              );
            })
          )}
        </div>
      </div>
      <div className="w-2/3 pl-6 flex flex-col h-full">
        {selectedDecId === 'persona' ? <PersonaForm user={user} targetDecisions={targetDecisions} existingData={currentPersona} /> : selectedDecision && selectedBn ? <CapabilityForm user={user} decision={selectedDecision} bottleneck={selectedBn} /> : null}
      </div>
    </div>
  );
};

const CapabilityForm = ({ user, decision, bottleneck }) => {
  const [competencies, setCompetencies] = useState(['', '', '']);
  const [talents, setTalents] = useState(['', '', '']);
  const [microSkills, setMicroSkills] = useState(['', '', '', '', '']);
  const [isGenerating, setIsGenerating] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');
  const [isSaving, setIsSaving] = useState(false);
  const [saveSuccess, setSaveSuccess] = useState(false);

  useEffect(() => {
    if (decision.capabilities) {
      setCompetencies(decision.capabilities.competencies || ['', '', '']); setTalents(decision.capabilities.talents || ['', '', '']); setMicroSkills(decision.capabilities.microSkills || ['', '', '', '', '']);
    } else { setCompetencies(['', '', '']); setTalents(['', '', '']); setMicroSkills(['', '', '', '', '']); }
    setErrorMsg('');
  }, [decision]);

  const handleAutoGenerate = async () => {
    setIsGenerating(true); setErrorMsg('');
    try {
      const result = await generateCapabilityJSON(bottleneck.taskName, bottleneck.reason, decision.finalDecision === 'recruit' ? '採用' : '育成');
      if (result) {
        setCompetencies([...(result.competencies||[]), '', '', ''].slice(0,3)); setTalents([...(result.talents||[]), '', '', ''].slice(0,3)); setMicroSkills([...(result.microSkills||[]), '', '', '', '', ''].slice(0,5));
      } else { throw new Error("Invalid format"); }
    } catch (e) { setErrorMsg("AIからの抽出に失敗しました。もう一度お試しいただくか、手動で選択してください。"); }
    setIsGenerating(false);
  };

  const handleSave = async () => {
    setIsSaving(true);
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'decisions', decision.id), { capabilities: { competencies, talents, microSkills }, updatedAt: serverTimestamp() });
    setIsSaving(false); setSaveSuccess(true); setTimeout(() => setSaveSuccess(false), 3000);
  };

  return (
    <div className="bg-white border border-slate-200 rounded-xl shadow-sm flex flex-col h-full overflow-hidden">
      <div className={`p-5 border-b border-slate-100 shrink-0 ${decision.finalDecision === 'recruit' ? 'bg-indigo-50/50' : 'bg-emerald-50/50'}`}><p className="text-sm font-bold text-slate-800">{bottleneck.taskName}</p></div>
      <div className="p-6 flex-1 overflow-y-auto space-y-6 custom-scrollbar">
        <div className="bg-blue-50/50 p-4 rounded-xl border border-blue-100 flex justify-between items-center">
          <div><h4 className="text-sm font-bold text-[#1a365d] flex items-center"><Sparkles className="w-4 h-4 mr-1 text-[#4cb3d4]" />AIによる能力要件の自動抽出</h4></div>
          <button onClick={handleAutoGenerate} disabled={isGenerating} className="bg-[#4cb3d4] text-white px-4 py-2 rounded-lg text-xs font-bold shadow-sm hover:bg-[#3ba2c3] flex items-center">{isGenerating ? <Loader2 className="w-3 h-3 mr-2 animate-spin" /> : <Sparkles className="w-3 h-3 mr-2" />} 自動抽出する</button>
        </div>
        {errorMsg && <div className="text-xs text-red-600 bg-red-50 p-2 rounded border border-red-200">{errorMsg}</div>}
        {[['必要職能', competencies, setCompetencies, COMPETENCY_DICT], ['つながる才能', talents, setTalents, TALENT_DICT], ['必要マイクロスキル', microSkills, setMicroSkills, MICROSKILL_DICT]].map(([label, state, setState, dict]) => (
          <div key={label}>
            <label className="block text-sm font-bold text-[#1a365d] mb-2">{label}</label>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
              {state.map((val, i) => (
                <select key={i} value={val} onChange={e => { const arr = [...state]; arr[i] = e.target.value; setState(arr); }} className="w-full border border-slate-300 rounded p-2 text-xs font-medium text-slate-700 outline-none focus:border-[#4cb3d4] bg-white">
                  <option value="">(選択してください)</option>{dict.map(item => <option key={item} value={item}>{item}</option>)}
                </select>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="p-4 border-t border-slate-100 bg-slate-50 flex justify-end items-center shrink-0">
        {saveSuccess && <span className="text-xs font-bold text-emerald-600 mr-4 flex items-center"><CheckCircle className="w-4 h-4 mr-1" /> 保存完了</span>}
        <button onClick={handleSave} disabled={isSaving} className="bg-[#1a365d] text-white hover:bg-[#12284b] px-6 py-2 rounded-lg font-bold text-sm flex items-center">{isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />} 能力を保存</button>
      </div>
    </div>
  );
};

const PersonaForm = ({ user, targetDecisions, existingData }) => {
  const [summary, setSummary] = useState(existingData?.summary || '');
  const [isGenerating, setIsGenerating] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [saveSuccess, setSaveSuccess] = useState(false);

  const allComps = [...new Set(targetDecisions.flatMap(d => d.capabilities?.competencies || []).filter(Boolean))];
  const allTalents = [...new Set(targetDecisions.flatMap(d => d.capabilities?.talents || []).filter(Boolean))];
  const allSkills = [...new Set(targetDecisions.flatMap(d => d.capabilities?.microSkills || []).filter(Boolean))];

  useEffect(() => { setSummary(existingData?.summary || ''); }, [existingData]);

  const handleGenerate = async () => {
    if(allComps.length === 0 && allSkills.length === 0) return;
    setIsGenerating(true); setSummary(await generatePersonaSummary(allComps, allTalents, allSkills)); setIsGenerating(false);
  };
  const handleSave = async () => {
    setIsSaving(true);
    await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'personas', 'current_role'), { summary, updatedAt: serverTimestamp() }, { merge: true });
    setIsSaving(false); setSaveSuccess(true); setTimeout(() => setSaveSuccess(false), 3000);
  };

  return (
    <div className="bg-white border border-slate-200 rounded-xl shadow-sm flex flex-col h-full overflow-hidden">
      <div className="p-6 border-b border-slate-100 shrink-0 bg-[#1a365d] text-white">
        <h3 className="text-lg font-bold flex items-center"><Users className="w-5 h-5 mr-2" /> 全体ペルソナまとめ</h3>
        <p className="text-xs opacity-80 mt-1">選ばれたすべてのタスクの能力要件を統合し、求める人物像を言語化します。</p>
      </div>
      <div className="p-6 flex-1 overflow-y-auto space-y-6 custom-scrollbar">
        <div className="grid grid-cols-3 gap-4">
          <div className="bg-slate-50 border border-slate-200 rounded-lg p-4"><h4 className="text-xs font-bold text-slate-500 mb-2 border-b pb-1">抽出された 職能</h4><ul className="text-sm font-bold text-[#1a365d] space-y-1">{allComps.length > 0 ? allComps.map(c=><li key={c}>・{c}</li>) : <li className="text-slate-400 font-normal">未設定</li>}</ul></div>
          <div className="bg-slate-50 border border-slate-200 rounded-lg p-4"><h4 className="text-xs font-bold text-slate-500 mb-2 border-b pb-1">抽出された 才能</h4><ul className="text-sm font-bold text-slate-700 space-y-1">{allTalents.length > 0 ? allTalents.map(c=><li key={c}>・{c}</li>) : <li className="text-slate-400 font-normal">未設定</li>}</ul></div>
          <div className="bg-slate-50 border border-slate-200 rounded-lg p-4"><h4 className="text-xs font-bold text-slate-500 mb-2 border-b pb-1">抽出された マイクロスキル</h4><ul className="text-xs font-bold text-slate-600 space-y-1 leading-relaxed">{allSkills.length > 0 ? allSkills.map(c=><li key={c}>・{c}</li>) : <li className="text-slate-400 font-normal">未設定</li>}</ul></div>
        </div>
        <div className="mt-8 border-t border-slate-200 pt-6">
          <div className="flex justify-between items-center mb-2">
            <label className="block text-sm font-bold text-[#1a365d]">人物像サマリー (採用・育成ターゲット)</label>
            <button onClick={handleGenerate} disabled={isGenerating || (allComps.length===0 && allSkills.length===0)} className="text-xs bg-[#4cb3d4]/10 text-[#4cb3d4] font-bold px-3 py-1.5 rounded hover:bg-[#4cb3d4]/20 flex items-center">
              {isGenerating ? <Loader2 className="w-3 h-3 mr-1 animate-spin" /> : <Sparkles className="w-3 h-3 mr-1" />} AIでサマリーを生成
            </button>
          </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-[150px] resize-none" placeholder="求める人物像のサマリー文がここに入ります..." value={summary} onChange={e => setSummary(e.target.value)}></textarea>
        </div>
      </div>
      <div className="p-4 border-t border-slate-100 bg-slate-50 flex justify-end items-center shrink-0">
        {saveSuccess && <span className="text-xs font-bold text-emerald-600 mr-4 flex items-center"><CheckCircle className="w-4 h-4 mr-1" /> 保存完了</span>}
        <button onClick={handleSave} disabled={isSaving} className="bg-[#1a365d] text-white hover:bg-[#12284b] px-6 py-2 rounded-lg font-bold text-sm flex items-center">{isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />} ペルソナを保存</button>
      </div>
    </div>
  );
};


// ==========================================
// 5. KPI・教育設計 (KpiEducationView) + CSV連携
// ==========================================
const KpiEducationView = ({ user, decisions, bottlenecks, kpis }) => {
  const targetDecisions = decisions.filter(d => (d.finalDecision === 'train' || d.finalDecision === 'recruit') && d.capabilities?.microSkills?.some(Boolean));
  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)]">
      <div className="w-1/3 pr-6 border-r border-slate-200 flex flex-col h-full shrink-0">
        <div className="mb-4 shrink-0"><h2 className="text-2xl font-bold text-slate-800 mb-2">5. KPI・教育設計</h2><p className="text-slate-600 text-sm">設定したマイクロスキルを「評価可能な行動(KPI)」と「具体的な教育方法」に落とし込みます。</p></div>
        <div className="flex-1 overflow-y-auto pr-2 space-y-3 custom-scrollbar">
          {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);
              return (
                <div key={dec.id} onClick={() => setSelectedDecId(dec.id)} className={`p-4 rounded-lg border cursor-pointer transition-all ${selectedDecId === dec.id ? 'border-amber-500 ring-1 ring-amber-500 bg-white shadow-sm' : 'border-slate-200 bg-slate-50 hover:bg-white'}`}>
                  <span className="font-bold text-slate-800 text-sm leading-snug line-clamp-2">{bn?.taskName || "不明なタスク"}</span>
                </div>
              );
            })
          )}
        </div>
      </div>
      <div className="w-2/3 pl-6 flex flex-col h-full">
        {selectedDecision && selectedBn ? <KpiForm user={user} decision={selectedDecision} bottleneck={selectedBn} kpis={kpis} /> : <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"><Target className="w-12 h-12 mb-4 text-slate-300" /><p className="text-center">左側のリストからタスクを選択してください。</p></div>}
      </div>
    </div>
  );
};

const KpiForm = ({ user, decision, bottleneck, kpis }) => {
  const targetSkills = decision.capabilities.microSkills.filter(Boolean);
  const [formData, setFormData] = useState({});
  const [isSaving, setIsSaving] = useState(false);
  const [saveSuccess, setSaveSuccess] = useState(false);

  useEffect(() => {
    const existingKpi = kpis.find(k => k.decisionId === decision.id);
    if (existingKpi && existingKpi.skillsData) { setFormData(existingKpi.skillsData); } 
    else { const initData = {}; targetSkills.forEach(s => { initData[s] = { kpi: '', method: '', deadline: '' }; }); setFormData(initData); }
  }, [decision, kpis]);

  const handleChange = (skill, field, value) => { setFormData(prev => ({ ...prev, [skill]: { ...(prev[skill] || {}), [field]: value } })); };

  const handleSave = async () => {
    setIsSaving(true);
    const existingKpi = kpis.find(k => k.decisionId === decision.id);
    const id = existingKpi?.id || `kpi_${decision.id}`;
    await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'kpis', id), { decisionId: decision.id, taskId: bottleneck.taskId, skillsData: formData, updatedAt: serverTimestamp() }, { merge: true });
    setIsSaving(false); setSaveSuccess(true); setTimeout(() => setSaveSuccess(false), 3000);
  };

  const handleExportCSV = () => {
    let csvContent = "対象タスク名,対象スキル,行動KPI,教育・支援アクション,達成目標時期\n";
    targetSkills.forEach(skill => {
      const data = formData[skill] || {};
      csvContent += `"${bottleneck.taskName}","${skill}","${data.kpi || ''}","${data.method || ''}","${data.deadline || ''}"\n`;
    });
    const blob = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url; link.download = `KPI設定_${bottleneck.taskName}.csv`;
    document.body.appendChild(link); link.click(); document.body.removeChild(link);
  };

  return (
    <div className="bg-white border border-slate-200 rounded-xl shadow-sm flex flex-col h-full overflow-hidden">
      <div className="p-5 border-b border-slate-100 bg-amber-50/30 shrink-0 flex justify-between items-start">
        <div>
          <h3 className="text-sm font-bold text-amber-700 mb-1 flex items-center"><Target className="w-4 h-4 mr-1" /> KPI・教育アクション設定</h3>
          <p className="text-lg font-black text-slate-800">{bottleneck.taskName}</p>
        </div>
        <button onClick={handleExportCSV} className="text-xs bg-white border border-slate-300 text-slate-600 hover:bg-slate-50 px-3 py-1.5 rounded flex items-center shadow-sm">
          <Download className="w-3.5 h-3.5 mr-1.5" /> スプレッドシート用に出力
        </button>
      </div>
      <div className="p-6 flex-1 overflow-y-auto space-y-6 custom-scrollbar">
        {targetSkills.map((skill, idx) => (
          <div key={idx} className="border border-slate-200 rounded-lg overflow-hidden">
            <div className="bg-slate-100 px-4 py-2 font-bold text-sm text-[#1a365d] border-b border-slate-200">【スキル {idx+1}】 {skill}</div>
            <div className="p-4 bg-white grid grid-cols-2 gap-4">
              <div className="col-span-2"><label className="block text-xs font-bold text-slate-500 mb-1">行動KPI (どうなっていればクリアか？)</label><input type="text" placeholder="例: 月1回、〇〇のシートを提出する" value={formData[skill]?.kpi || ''} onChange={e => handleChange(skill, 'kpi', e.target.value)} className="w-full border border-slate-300 rounded p-2 text-sm focus:border-amber-400 outline-none" /></div>
              <div><label className="block text-xs font-bold text-slate-500 mb-1">教育・支援アクション</label><select value={formData[skill]?.method || ''} onChange={e => handleChange(skill, 'method', e.target.value)} className="w-full border border-slate-300 rounded p-2 text-sm focus:border-amber-400 outline-none bg-white"><option value="">選択...</option><option value="ojt">OJT (同行・実務指導)</option><option value="manual">マニュアル・動画学習</option><option value="1on1">1on1での振り返り</option><option value="external">外部研修・資格取得</option></select></div>
              <div><label className="block text-xs font-bold text-slate-500 mb-1">達成目標時期</label><select value={formData[skill]?.deadline || ''} onChange={e => handleChange(skill, 'deadline', e.target.value)} className="w-full border border-slate-300 rounded p-2 text-sm focus:border-amber-400 outline-none bg-white"><option value="">選択...</option><option value="1m">1ヶ月以内</option><option value="3m">3ヶ月以内</option><option value="6m">半年以内</option><option value="1y">1年以内</option></select></div>
            </div>
          </div>
        ))}
      </div>
      <div className="p-4 border-t border-slate-100 bg-slate-50 flex justify-end items-center shrink-0">
        {saveSuccess && <span className="text-xs font-bold text-emerald-600 mr-4"><CheckCircle className="w-4 h-4 inline mr-1" />保存完了</span>}
        <button onClick={handleSave} disabled={isSaving} className="bg-amber-600 text-white hover:bg-amber-700 px-6 py-2 rounded-lg font-bold text-sm flex items-center">{isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />} KPI設定を保存</button>
      </div>
    </div>
  );
};


// ==========================================
// 6. 定期レビュー (ReviewView) + PDF出力機能
// ==========================================
const ReviewView = ({ user, profile, decisions, bottlenecks, kpis, reviews }) => {
  const targetKpis = kpis.filter(k => Object.keys(k.skillsData || {}).length > 0);
  const [selectedKpiId, setSelectedKpiId] = useState(targetKpis[0]?.id || null);
  const selectedKpi = targetKpis.find(k => k.id === selectedKpiId);
  const relatedBn = bottlenecks.find(b => b.taskId === selectedKpi?.taskId);

  return (
    <div className="space-y-6 flex h-[calc(100vh-12rem)]">
      <div className="w-1/3 pr-6 border-r border-slate-200 flex flex-col h-full shrink-0 print-hidden">
        <div className="mb-4 shrink-0"><h2 className="text-2xl font-bold text-slate-800 mb-2">6. 定期レビュー</h2><p className="text-slate-600 text-sm">設定したKPIに対する自己/上長評価を行い、定例会議や1on1で使えるレポートとして出力します。</p></div>
        <div className="flex-1 overflow-y-auto pr-2 space-y-3 custom-scrollbar">
          {targetKpis.length === 0 ? ( <div className="text-sm text-slate-500 p-4 bg-slate-50 rounded border border-dashed border-slate-200">評価対象がありません。「KPI・教育設計」を完了させてください。</div> ) : (
            targetKpis.map(kpi => {
              const bn = bottlenecks.find(b => b.taskId === kpi.taskId);
              return (
                <div key={kpi.id} onClick={() => setSelectedKpiId(kpi.id)} className={`p-4 rounded-lg border cursor-pointer transition-all ${selectedKpiId === kpi.id ? 'border-rose-500 ring-1 ring-rose-500 bg-white shadow-sm' : 'border-slate-200 bg-slate-50 hover:bg-white'}`}>
                  <span className="font-bold text-slate-800 text-sm leading-snug line-clamp-2">{bn?.taskName || "不明なタスク"}</span>
                </div>
              );
            })
          )}
        </div>
      </div>
      <div className="w-2/3 pl-6 flex flex-col h-full print-main-content">
        {selectedKpi && relatedBn ? <ReviewForm user={user} profile={profile} kpi={selectedKpi} bottleneck={relatedBn} reviews={reviews} /> : <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 print-hidden"><ClipboardCheck className="w-12 h-12 mb-4 text-slate-300" /><p className="text-center">左側のリストからレビュー対象を選択してください。</p></div>}
      </div>
    </div>
  );
};

const ReviewForm = ({ user, profile, kpi, bottleneck, reviews }) => {
  const skills = Object.keys(kpi.skillsData || {});
  const [formData, setFormData] = useState({});
  const [generalComment, setGeneralComment] = useState('');
  const [isSaving, setIsSaving] = useState(false);
  const [saveSuccess, setSaveSuccess] = useState(false);
  const [showReport, setShowReport] = useState(false); // レポート表示切替

  useEffect(() => {
    const existingRev = reviews.find(r => r.kpiId === kpi.id);
    if (existingRev && existingRev.reviewData) { 
      setFormData(existingRev.reviewData); 
      setGeneralComment(existingRev.generalComment || '');
    } else { 
      const initData = {}; skills.forEach(s => { initData[s] = { rating: '', comment: '' }; }); 
      setFormData(initData); setGeneralComment('');
    }
  }, [kpi, reviews]);

  const handleChange = (skill, field, value) => { setFormData(prev => ({ ...prev, [skill]: { ...(prev[skill] || {}), [field]: value } })); };

  const handleSave = async () => {
    setIsSaving(true);
    const existingRev = reviews.find(r => r.kpiId === kpi.id);
    const id = existingRev?.id || `rev_${kpi.id}`;
    await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'reviews', id), { kpiId: kpi.id, taskId: bottleneck.taskId, reviewData: formData, generalComment, updatedAt: serverTimestamp() }, { merge: true });
    setIsSaving(false); setSaveSuccess(true); setTimeout(() => setSaveSuccess(false), 3000);
  };

  // レポート出力画面 (印刷用)
  if (showReport) {
    return (
      <div className="absolute inset-0 bg-white z-50 overflow-y-auto">
        <div className="max-w-4xl mx-auto bg-white min-h-screen p-10 relative">
          
          {/* ヘッダー・アクション領域 (印刷時は消える) */}
          <div className="flex justify-between items-center mb-8 print-hidden bg-slate-50 p-4 rounded-lg border border-slate-200">
            <div className="flex items-center text-rose-700 font-bold"><ClipboardCheck className="w-5 h-5 mr-2"/> レポートプレビュー</div>
            <div className="flex space-x-3">
              <button onClick={() => setShowReport(false)} className="px-4 py-2 border border-slate-300 rounded bg-white text-slate-600 hover:bg-slate-50 text-sm font-bold flex items-center"><X className="w-4 h-4 mr-1"/> 閉じる</button>
              <button onClick={() => window.print()} className="px-4 py-2 bg-rose-600 text-white rounded hover:bg-rose-700 text-sm font-bold flex items-center shadow-sm"><Printer className="w-4 h-4 mr-1"/> PDF出力 / 印刷</button>
            </div>
          </div>

          {/* レポート本体 (印刷対象) */}
          <div className="print-break-inside-avoid">
            <div className="text-center mb-10 border-b-2 border-[#1a365d] pb-6">
              <h1 className="text-3xl font-black text-[#1a365d] mb-4">定期レビュー・1on1 報告書</h1>
              <div className="flex justify-between text-slate-600 font-medium px-4">
                <span>{profile?.companyName || '株式会社サンプル'} 御中</span>
                <span>作成日: {new Date().toLocaleDateString('ja-JP')}</span>
              </div>
            </div>

            <div className="mb-8">
              <h2 className="text-sm font-bold text-slate-500 mb-1">評価対象タスク</h2>
              <div className="text-xl font-black text-slate-800 bg-slate-50 p-4 rounded border border-slate-200">{bottleneck.taskName}</div>
            </div>

            <div className="space-y-6 mb-8">
              <h3 className="text-lg font-bold text-[#1a365d] border-b border-slate-200 pb-2">行動KPIと達成度評価</h3>
              {skills.map((skill, idx) => {
                const kpiSetting = kpi.skillsData[skill];
                const review = formData[skill] || {};
                const ratingText = {"5":"5: 期待以上", "4":"4: 達成", "3":"3: やや不足", "2":"2: 不足", "1":"1: 未着手"}[review.rating] || "未評価";
                
                return (
                  <div key={idx} className="border border-slate-300 rounded-lg p-5 print-break-inside-avoid">
                    <div className="font-bold text-[#1a365d] text-sm mb-3">【対象スキル】 {skill}</div>
                    <div className="grid grid-cols-12 gap-4 text-sm">
                      <div className="col-span-12 md:col-span-8 bg-slate-50 p-3 rounded">
                        <div className="text-xs text-slate-500 font-bold mb-1">設定された行動KPI</div>
                        <div className="font-medium text-slate-800">{kpiSetting.kpi || "未設定"}</div>
                      </div>
                      <div className="col-span-12 md:col-span-4 bg-rose-50/50 p-3 rounded border border-rose-100">
                        <div className="text-xs text-rose-700 font-bold mb-1">達成度評価</div>
                        <div className="font-black text-rose-700">{ratingText}</div>
                      </div>
                      <div className="col-span-12">
                        <div className="text-xs text-slate-500 font-bold mb-1">振り返り・次回への課題</div>
                        <div className="bg-white border border-slate-200 p-3 rounded min-h-[3rem] text-slate-700">{review.comment || "記載なし"}</div>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>

            <div className="print-break-inside-avoid">
              <h3 className="text-lg font-bold text-[#1a365d] border-b border-slate-200 pb-2 mb-4">総評・次回アクション</h3>
              <div className="bg-slate-50 border border-slate-300 p-5 rounded-lg min-h-[150px] text-slate-800 whitespace-pre-wrap leading-relaxed">
                {generalComment || "記載なし"}
              </div>
            </div>
            
            <div className="mt-12 text-center text-slate-400 text-xs">
              Powered by JOBJOIN SaaS
            </div>
          </div>
        </div>
      </div>
    );
  }

  // 通常の入力フォーム画面
  return (
    <div className="bg-white border border-slate-200 rounded-xl shadow-sm flex flex-col h-full overflow-hidden print-hidden">
      <div className="p-5 border-b border-slate-100 bg-rose-50/30 shrink-0 flex justify-between items-start">
        <div>
          <h3 className="text-sm font-bold text-rose-700 mb-1 flex items-center"><ClipboardCheck className="w-4 h-4 mr-1" /> 月次 / 3ヶ月レビュー評価</h3>
          <p className="text-lg font-black text-slate-800">{bottleneck.taskName}</p>
        </div>
        <button onClick={() => setShowReport(true)} className="text-xs bg-white border border-slate-300 text-slate-600 hover:bg-slate-50 px-3 py-1.5 rounded flex items-center shadow-sm font-bold">
          <FileText className="w-3.5 h-3.5 mr-1.5 text-[#1a365d]" /> 1on1・定例用レポート作成
        </button>
      </div>

      <div className="p-6 flex-1 overflow-y-auto space-y-6 custom-scrollbar">
        {skills.map((skill, idx) => {
          const kpiSetting = kpi.skillsData[skill];
          return (
            <div key={idx} className="border border-slate-200 rounded-lg overflow-hidden">
              <div className="bg-slate-100 px-4 py-2 font-bold text-sm text-[#1a365d] border-b border-slate-200">【対象スキル】 {skill}</div>
              <div className="p-4 bg-white grid grid-cols-1 gap-4">
                <div className="bg-slate-50 p-3 rounded border border-slate-200"><div className="text-xs text-slate-500 font-bold mb-1">設定された行動KPI:</div><div className="text-sm font-bold text-slate-800">{kpiSetting.kpi || "（未設定）"}</div></div>
                <div className="grid grid-cols-3 gap-4">
                  <div className="col-span-1"><label className="block text-xs font-bold text-slate-500 mb-1">達成度評価 (1〜5)</label><select value={formData[skill]?.rating || ''} onChange={e => handleChange(skill, 'rating', e.target.value)} className="w-full border border-slate-300 rounded p-2 text-sm focus:border-rose-400 outline-none font-bold"><option value="">-</option><option value="5">5: 期待以上</option><option value="4">4: 達成</option><option value="3">3: やや不足</option><option value="2">2: 不足</option><option value="1">1: 未着手</option></select></div>
                  <div className="col-span-2"><label className="block text-xs font-bold text-slate-500 mb-1">振り返り・次回への課題</label><input type="text" placeholder="例: 一人でできるようになってきた。次はスピードを意識。" value={formData[skill]?.comment || ''} onChange={e => handleChange(skill, 'comment', e.target.value)} className="w-full border border-slate-300 rounded p-2 text-sm focus:border-rose-400 outline-none" /></div>
                </div>
              </div>
            </div>
          )
        })}
        
        {/* レポートの総評入力枠を追加 */}
        <div className="border border-slate-200 rounded-lg p-4 bg-slate-50 mt-4">
           <label className="block text-sm font-bold text-[#1a365d] mb-2 flex items-center"><FileText className="w-4 h-4 mr-1"/> レポート用 総評・次回アクション</label>
           <textarea 
              value={generalComment} 
              onChange={e => setGeneralComment(e.target.value)}
              placeholder="クライアントへの提出や次回の1on1に向けて、全体的な振り返りやアドバイスを記載してください。"
              className="w-full border border-slate-300 rounded p-3 text-sm focus:border-rose-400 outline-none min-h-[100px]"
           />
        </div>
      </div>

      <div className="p-4 border-t border-slate-100 bg-slate-50 flex justify-end items-center shrink-0">
        {saveSuccess && <span className="text-xs font-bold text-emerald-600 mr-4"><CheckCircle className="w-4 h-4 inline mr-1" />保存完了</span>}
        <button onClick={handleSave} disabled={isSaving} className="bg-rose-600 text-white hover:bg-rose-700 px-6 py-2 rounded-lg font-bold text-sm flex items-center shadow-sm">
          {isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />} 評価を保存
        </button>
      </div>
    </div>
  );
};