import React, { useEffect, useState } from 'react';
import { GanttChart } from '@/components/gantt/GanttChart';
import { Project } from '@/types/gantt';
import { Button } from '@/components/ui/button';
import { PlusIcon } from '@heroicons/react/24/outline';
import { useRouter } from 'next/router';

const formatDate = (date: string) => {
  return new Date(date).toISOString().split('T')[0];
};

const GanttPage = () => {
  const router = useRouter();
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [hasChanges, setHasChanges] = useState(false);

  useEffect(() => {
    const fetchProjects = async () => {
      try {
        setLoading(true);
        
        // ローカルAPIからプロジェクトデータを取得
        const response = await fetch('/api/projects');
        if (!response.ok) {
          throw new Error('プロジェクトの取得に失敗しました');
        }
        const data = await response.json();
        setProjects(data);
      } catch (err) {
        console.error('プロジェクトの取得に失敗しました:', err);
        setError('プロジェクトの取得に失敗しました');
      } finally {
        setLoading(false);
      }
    };

    fetchProjects();
  }, []);

  const handleSave = async () => {
    try {
      const response = await fetch('/api/projects', {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(projects),
      });

      if (!response.ok) {
        throw new Error('プロジェクトの保存に失敗しました');
      }

      setHasChanges(false);
    } catch (err) {
      console.error('プロジェクトの保存に失敗しました:', err);
      setError('プロジェクトの保存に失敗しました');
    }
  };

  const handleAddProject = () => {
    router.push('/projects/new');
  };

  const renderTaskList = () => {
    return (
      <div className="w-[300px] bg-white border-r">
        <div className="p-3 border-b bg-gray-50">
          <h2 className="text-sm font-semibold text-gray-700">タスク一覧</h2>
        </div>
        <div className="overflow-y-auto">
          {projects.map((project) => (
            <div key={project.id}>
              {project.assignments?.map((assignment) => (
                <div 
                  key={assignment.id} 
                  className="flex flex-col p-2 hover:bg-gray-50 border-b"
                >
                  <div className="flex items-center justify-between">
                    <div className="flex-1 min-w-0">
                      <div className="text-sm font-medium truncate">
                        {project.name}-{assignment.worker}
                      </div>
                    </div>
                    <div className="ml-2 text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-800">
                      {assignment.concurrent ? '並' : '直'}
                    </div>
                  </div>
                  <div className="text-xs text-gray-500 mt-1">
                    {formatDate(assignment.startDate)}～{formatDate(assignment.endDate)}
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    );
  };

  if (loading) {
    return (
      <div className="container mx-auto p-4">
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="container mx-auto p-4">
        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
          <p>{error}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto p-4">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-2xl font-bold">ガントチャート</h1>
        <div className="flex gap-2">
          {hasChanges && (
            <Button onClick={handleSave} variant="default">
              変更を保存
            </Button>
          )}
          <Button onClick={handleAddProject} variant="default">
            <PlusIcon className="h-5 w-5 mr-1" />
            新規プロジェクト
          </Button>
        </div>
      </div>
      <div className="flex border rounded-lg overflow-hidden bg-white h-[calc(100vh-12rem)]">
        {renderTaskList()}
        <div className="flex-1 flex flex-col">
          <div className="flex-1 overflow-y-auto">
            <GanttChart 
              projects={projects} 
              setProjects={setProjects}
              setHasChanges={setHasChanges}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default GanttPage;