/**
 * @file MonthlyView.tsx
 * @description プロジェクトの月別表示コンポーネント
 * 
 * このコンポーネントは以下の機能を提供します：
 * - 月別のプロジェクト一覧表示
 * - プロジェクトメンバーの稼働状況表示
 * - 外注・兼任状態の可視化
 * - 月別の売上・目標達成状況の表示
 * - プロジェクトタイプによる色分け表示
 */

import React, { useEffect, useState } from 'react';

// 型定義
type ProjectMaster = {
  id: string;
  name: string;
  type: string;
  leader: string;
  budget: number;
  assignments: Assignment[];
};

type Assignment = {
  id: string;
  worker: string;
  startDate: string;
  endDate: string;
  external: boolean;
  concurrent: boolean;
  separate: boolean;
};

const PROJECT_TYPES = {
  'Spine': 'bg-blue-200 dark:bg-blue-900',
  '3D': 'bg-red-200 dark:bg-red-900',
  '2D': 'bg-green-200 dark:bg-green-900',
  '研修': 'bg-orange-200 dark:bg-orange-900'
};

type MonthlyData = {
  [month: string]: {
    projects: {
      [projectId: string]: ProjectMaster & {
        activeAssignments: Assignment[];
      };
    };
    stats: {
      稼働人数: number;
      兼任: number;
      外注: number;
      切り分け: number;
      不足: number;
      社内: number;
      予備人員: number;
    };
  };
};

export function MonthlyView() {
  const [projects, setProjects] = useState<ProjectMaster[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [sortConfig, setSortConfig] = useState<{
    key: 'name' | 'worker' | 'leader';
    direction: 'asc' | 'desc';
  } | null>(null);
  const [monthlyStaffCount, setMonthlyStaffCount] = useState<Record<string, number>>({
    '1月': 15, '2月': 15, '3月': 15, '4月': 15, '5月': 15, '6月': 15,
    '7月': 15, '8月': 15, '9月': 15, '10月': 15, '11月': 15, '12月': 15
  });

  useEffect(() => {
    const fetchProjects = async () => {
      try {
        const response = await fetch('/api/projects');
        if (!response.ok) {
          throw new Error('プロジェクトの取得に失敗しました');
        }
        const data = await response.json();
        setProjects(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : '予期せぬエラーが発生しました');
      } finally {
        setLoading(false);
      }
    };

    fetchProjects();
  }, []);

  const generateMonthlyData = (): MonthlyData => {
    const monthlyData: MonthlyData = {};
    const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

    months.forEach(month => {
      monthlyData[month] = {
        projects: {},
        stats: {
          稼働人数: 0,
          兼任: 0,
          外注: 0,
          切り分け: 0,
          不足: 0,
          社内: monthlyStaffCount[month],
          予備人員: 0
        }
      };

      // 月ごとの全アサインメントを集計
      const monthAssignments = [];
      projects.forEach(project => {
        const monthNum = parseInt(month);
        const currentDate = new Date(2025, monthNum - 1, 1);
        const monthEnd = new Date(2025, monthNum, 0);

        // その月に有効なアサインメントを抽出
        const activeAssignments = project.assignments.filter(assignment => {
          const startDate = new Date(assignment.startDate);
          const endDate = new Date(assignment.endDate);
          return startDate <= monthEnd && endDate >= currentDate;
        });

        if (activeAssignments.length > 0) {
          monthlyData[month].projects[project.id] = {
            ...project,
            activeAssignments
          };
          monthAssignments.push(...activeAssignments);
        }
      });

      // 月ごとの統計を計算
      const 兼任数 = monthAssignments.filter(a => a.concurrent).length;
      const 外注数 = monthAssignments.filter(a => a.external).length;
      const 切り分け数 = monthAssignments.filter(a => a.separate).length;
      const 社内人数 = monthlyStaffCount[month];
      const 作業者数 = monthAssignments.length;

      monthlyData[month].stats.兼任 = 兼任数;
      monthlyData[month].stats.外注 = 外注数;
      monthlyData[month].stats.切り分け = 切り分け数;
      monthlyData[month].stats.社内 = 社内人数;
      
      // 稼働人数 = 作業者数 - (外注 + 兼任 + 切り分け)
      const 稼働人数 = 作業者数 - (外注数 + 兼任数 + 切り分け数);
      monthlyData[month].stats.稼働人数 = 稼働人数;
      
      // 不足 = 稼働人数 - 社内（マイナスの場合は0）
      const 不足 = Math.max(0, 稼働人数 - 社内人数);
      monthlyData[month].stats.不足 = 不足;
    });

    return monthlyData;
  };

  // ソート関数
  const sortProjects = (projectsToSort: any[], key: 'name' | 'worker' | 'leader') => {
    return [...projectsToSort].sort((a, b) => {
      let aValue = a[key];
      let bValue = b[key];

      // 作業者名の場合は配列の最初の作業者名を使用
      if (key === 'worker') {
        aValue = a.activeAssignments[0]?.worker || '';
        bValue = b.activeAssignments[0]?.worker || '';
      }

      if (sortConfig?.direction === 'desc') {
        [aValue, bValue] = [bValue, aValue];
      }

      return aValue.localeCompare(bValue, 'ja');
    });
  };

  // ソートハンドラー
  const handleSort = (key: 'name' | 'worker' | 'leader') => {
    setSortConfig(current => ({
      key,
      direction: current?.key === key && current.direction === 'asc' ? 'desc' : 'asc'
    }));
  };

  if (loading) {
    return <div className="p-4">読み込み中...</div>;
  }

  if (error) {
    return <div className="p-4 text-red-600">{error}</div>;
  }

  const monthlyData = generateMonthlyData();

  return (
    <div className="overflow-auto">
      <div className="flex min-w-max">
        {/* 左側のパネル（スクロール固定解除） */}
        <div className="w-20 border-r dark:border-gray-700 bg-white dark:bg-gray-900">
          <div className="p-1 space-y-2">
            {/* プロジェクトタイプ */}
            {Object.entries(PROJECT_TYPES).map(([type, bgColor]) => (
              <div key={type} className={`${bgColor} p-0.5 text-xs rounded`}>
                {type}
              </div>
            ))}

            {/* 担当者区分 */}
            <div className="space-y-1 text-xs">
              <div className="text-red-500 dark:text-red-400">リーダー</div>
              <div className="text-blue-500 dark:text-blue-400">外注</div>
              <div className="text-orange-500 dark:text-orange-400">兼任</div>
              <div className="text-purple-500 dark:text-purple-400">切り分け</div>
            </div>
          </div>
        </div>

        {/* 右側の横スクロール可能なコンテンツ */}
        <div className="flex gap-[5px]">
          {Object.entries(monthlyData).map(([month, data]) => (
            <div key={month} className="w-[400px] flex-shrink-0 border-r dark:border-gray-700">
              {/* 月見出し */}
              <div className="bg-gray-200 dark:bg-gray-800 p-1 text-sm font-bold border-b dark:border-gray-700">
                2025年{month}
              </div>

              {/* プロジェクト一覧 */}
              <table className="w-full">
                <thead>
                  <tr className="bg-gray-100 dark:bg-gray-800">
                    <th 
                      className="text-left p-1 text-sm w-32 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700"
                      onClick={() => handleSort('name')}
                    >
                      案件名
                      {sortConfig?.key === 'name' && (
                        <span className="ml-1">{sortConfig.direction === 'asc' ? '▲' : '▼'}</span>
                      )}
                    </th>
                    <th 
                      className="text-left p-1 text-sm cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700"
                      onClick={() => handleSort('worker')}
                    >
                      作業者名
                      {sortConfig?.key === 'worker' && (
                        <span className="ml-1">{sortConfig.direction === 'asc' ? '▲' : '▼'}</span>
                      )}
                    </th>
                    <th 
                      className="text-left p-1 text-sm border-l border-dashed dark:border-gray-600 w-24 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700"
                      onClick={() => handleSort('leader')}
                    >
                      リーダー
                      {sortConfig?.key === 'leader' && (
                        <span className="ml-1">{sortConfig.direction === 'asc' ? '▲' : '▼'}</span>
                      )}
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y dark:divide-gray-700">
                  {sortConfig
                    ? sortProjects(Object.values((data as MonthlyData[typeof month]).projects), sortConfig.key).map((project: any) => {
                      if ('id' in project && 'name' in project && 'type' in project && 'leader' in project && 'activeAssignments' in project) {
                        return (
                          <tr key={project.id}>
                            <td className={`p-1 text-sm ${PROJECT_TYPES[project.type]}`}>
                              {project.name}
                            </td>
                            <td className="p-1 text-sm">
                              {project.activeAssignments.map((assignment, index) => (
                                <span 
                                  key={index} 
                                  className={`mr-2 ${
                                    assignment.concurrent ? 'text-orange-500' : 
                                    assignment.external ? 'text-blue-500' : ''
                                  }`}
                                >
                                  {assignment.worker}
                                </span>
                              ))}
                            </td>
                            <td className="p-1 text-sm border-l border-dashed dark:border-gray-600 text-red-500 dark:text-red-400">
                              {project.leader}
                            </td>
                          </tr>
                        );
                      }
                      return null;
                    })
                    : Object.values((data as MonthlyData[typeof month]).projects).map((project: any) => {
                      if ('id' in project && 'name' in project && 'type' in project && 'leader' in project && 'activeAssignments' in project) {
                        return (
                          <tr key={project.id}>
                            <td className={`p-1 text-sm ${PROJECT_TYPES[project.type]}`}>
                              {project.name}
                            </td>
                            <td className="p-1 text-sm">
                              {project.activeAssignments.map((assignment, index) => (
                                <span 
                                  key={index} 
                                  className={`mr-2 ${
                                    assignment.concurrent ? 'text-orange-500' : 
                                    assignment.external ? 'text-blue-500' : ''
                                  }`}
                                >
                                  {assignment.worker}
                                </span>
                              ))}
                            </td>
                            <td className="p-1 text-sm border-l border-dashed dark:border-gray-600 text-red-500 dark:text-red-400">
                              {project.leader}
                            </td>
                          </tr>
                        );
                      }
                      return null;
                    })}
                </tbody>
              </table>

              {/* 月別集計情報 */}
              <div className="border-t dark:border-gray-700 p-2">
                <div className="grid grid-cols-3 gap-2 text-xs mb-2">
                  <div>
                    <div>稼働人数</div>
                    <div className="text-sm">{data.stats.稼働人数}</div>
                  </div>
                  <div>
                    <div>兼任</div>
                    <div className="text-sm">{data.stats.兼任}</div>
                  </div>
                  <div>
                    <div>外注</div>
                    <div className="text-sm">{data.stats.外注}</div>
                  </div>
                  <div>
                    <div>切り分け</div>
                    <div className="text-sm">{data.stats.切り分け}</div>
                  </div>
                  <div>
                    <div>不足</div>
                    <div className="text-sm">{data.stats.不足}</div>
                  </div>
                  <div>
                    <div>社内</div>
                    <div className="text-sm">
                      <input
                        type="number"
                        value={monthlyStaffCount[month]}
                        onChange={(e) => setMonthlyStaffCount(prev => ({
                          ...prev,
                          [month]: Number(e.target.value)
                        }))}
                        className="w-16 p-0.5 text-sm border rounded dark:bg-gray-800 dark:border-gray-700"
                        min="1"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}