import { useEffect, useState } from 'react';
import { ProjectForm } from '@/components/ProjectForm';
import { MonthlyView } from '@/components/MonthlyView';
import { Button } from '@/components/ui/button';
import { useRouter } from 'next/router';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { GanttChart } from '@/components/gantt/GanttChart';
import { Project } from '@/types/gantt';

// プロジェクトタイプの定義
const PROJECT_TYPES = {
  'Spine': { bgColor: 'bg-blue-100 text-blue-800' },
  '3D': { bgColor: 'bg-red-100 text-red-800' },
  '2D': { bgColor: 'bg-green-100 text-green-800' },
  '研修': { bgColor: 'bg-orange-100 text-orange-800' }
};

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

export default function ProjectsPage() {
  const router = useRouter();
  const [isAuthenticated, setIsAuthenticated] = useState(true);
  const [activeTab, setActiveTab] = useState('projects');
  const [projects, setProjects] = useState<Project[]>([]);
  const [hasChanges, setHasChanges] = useState(false);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // プロジェクトデータの取得
  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();
  }, []);

  useEffect(() => {
    // if (!isAuthenticated) {
    //   router.push('/login');
    // }
  }, [isAuthenticated, router]);

  return (
    <div className="min-h-screen bg-slate-50">
      <header className="bg-white shadow">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <h1 className="text-xl font-bold text-gray-800">プロジェクト管理システム</h1>
          <Button
            variant="outline"
            onClick={() => {
              setIsAuthenticated(false);
              router.push('/login');
            }}
          >
            ログアウト
          </Button>
        </div>
      </header>

      <main className="container mx-auto px-4 py-8">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
          <TabsList className="w-full justify-start bg-white border-b p-0 h-auto">
            <TabsTrigger
              value="projects"
              className="px-6 py-3 data-[state=active]:bg-slate-50 data-[state=active]:border-b-2 data-[state=active]:border-blue-600 rounded-none"
            >
              プロジェクト管理
            </TabsTrigger>
            <TabsTrigger
              value="monthly"
              className="px-6 py-3 data-[state=active]:bg-slate-50 data-[state=active]:border-b-2 data-[state=active]:border-blue-600 rounded-none"
            >
              月別表示
            </TabsTrigger>
            <TabsTrigger value="gantt">ガントチャート</TabsTrigger>
          </TabsList>

          <TabsContent value="projects" className="mt-6">
            <ProjectForm />
          </TabsContent>

          <TabsContent value="monthly" className="mt-6">
            <MonthlyView />
          </TabsContent>

          <TabsContent value="gantt">
            <GanttChart projects={projects} setProjects={setProjects} setHasChanges={setHasChanges} />
          </TabsContent>

          <TabsContent value="project" className="space-y-4">
            {loading ? (
              <div className="text-center py-4">読み込み中...</div>
            ) : error ? (
              <div className="text-center py-4 text-red-600">{error}</div>
            ) : (
              <div className="grid gap-4">
                {projects.map((project) => (
                  <div key={project.id} className="bg-white p-3 rounded-lg shadow-sm">
                    <div className="flex items-center gap-3">
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <h3 className="text-base font-semibold">{project.name}</h3>
                          <span className={`px-2 py-0.5 text-xs rounded ${
                            PROJECT_TYPES[project.type]?.bgColor || 'bg-gray-100'
                          }`}>
                            {project.type}
                          </span>
                        </div>
                        <p className="text-sm text-gray-600">リーダー: {project.leader}</p>
                      </div>
                    </div>
                    
                    {project.assignments && project.assignments.length > 0 && (
                      <div className="mt-2 border-t border-gray-100 pt-2">
                        <div className="grid gap-1">
                          {project.assignments.map((assignment) => (
                            <div key={assignment.id} className="text-sm grid grid-cols-[auto,1fr] gap-x-4 items-center">
                              <div className="flex items-center gap-1 min-w-[120px]">
                                <span className="font-medium">{assignment.worker}</span>
                                {assignment.external && (
                                  <span className="text-xs px-1 bg-blue-50 text-blue-600 rounded">外注</span>
                                )}
                                {assignment.concurrent && (
                                  <span className="text-xs px-1 bg-orange-50 text-orange-600 rounded">兼任</span>
                                )}
                              </div>
                              <div className="text-gray-600">
                                {assignment.startDate.split('T')[0]} ～ {assignment.endDate.split('T')[0]}
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
          </TabsContent>
        </Tabs>
      </main>
    </div>
  );
}