import React, { useState } from 'react'
import { useParams, Link, useNavigate } from 'react-router-dom'
import {
  FaArrowLeft,
  FaEdit,
  FaUser,
  FaDollarSign,
  FaBullseye,
  FaBuilding,
  FaClock,
  FaFlag,
  FaTasks,
  FaFileAlt,
  FaExclamationCircle,
  FaChartLine,
  FaFolder,
  FaPhone,
  FaEnvelope,
} from 'react-icons/fa'
import { TaskStatusEnum } from '../../../types/ps'
import { mockProjects } from '../../../mocks/mockProjects'
import { mockProjectPhases } from '../../../mocks/mockProjectPhases'
import { mockProjectTasks } from '../../../mocks/mockProjectTasks'
import dayjs from 'dayjs'
import classNames from 'classnames'
import { PriorityEnum } from '../../../types/common'
import {
  getProjectStatusColor,
  getProjectStatusIcon,
  getProjectStatusText,
  getProgressColor,
  getPriorityColor,
  getPriorityText,
  getProjectTypeColor,
  getProjectTypeText,
} from '../../../utils/erp'
import { Container } from '@/components/shared'

const ProjectView: React.FC = () => {
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const [activeTab, setActiveTab] = useState('overview')

  // Find the project by ID
  const project = mockProjects.find((p) => p.id === id)

  if (!project) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <FaFolder className="mx-auto h-12 w-12 text-gray-400" />
          <h3 className="mt-2 text-sm font-medium text-gray-900">Proje bulunamadı</h3>
          <p className="mt-1 text-sm text-gray-500">Belirtilen ID ile proje mevcut değil.</p>
          <div className="mt-6">
            <Link
              to="/admin/projects"
              className="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
            >
              <FaArrowLeft className="mr-2 h-4 w-4" />
              Projelere Dön
            </Link>
          </div>
        </div>
      </div>
    )
  }

  const tabs = [
    { id: 'overview', name: 'Genel Bakış', icon: FaChartLine },
    { id: 'phases', name: 'Fazlar', icon: FaFlag },
    { id: 'tasks', name: 'Görevler', icon: FaTasks },
    { id: 'documents', name: 'Belgeler', icon: FaFileAlt },
    { id: 'risks', name: 'Riskler', icon: FaExclamationCircle },
    { id: 'financial', name: 'Mali Özet', icon: FaDollarSign },
  ]

  const budgetUsagePercentage = (project.actualCost / project.budget) * 100
  const timeElapsed = dayjs().diff(dayjs(project.startDate), 'day')
  const totalDuration = dayjs(project.endDate).diff(dayjs(project.startDate), 'day')
  const timeProgress = Math.min((timeElapsed / totalDuration) * 100, 100)

  return (
    <Container>
      <div className="space-y-2">
        {/* Header */}
        <div className="bg-white shadow-sm border-b border-gray-200">
          <div className="p-2">
            <div className="flex items-center justify-between h-12">
              <div className="flex items-center space-x-2">
                <button
                  onClick={() => navigate('/admin/projects')}
                  className="flex items-center px-2 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
                >
                  <FaArrowLeft className="w-4 h-4 mr-2" />
                  Geri
                </button>
                <div className="flex items-center space-x-2">
                  <div className="w-9 h-9 bg-blue-100 rounded-lg flex items-center justify-center">
                    <FaFolder className="w-6 h-6 text-blue-600" />
                  </div>
                  <div>
                    <h1 className="text-lg font-bold text-gray-900">{project.code}</h1>
                    <p className="text-gray-600">{project.name}</p>
                  </div>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <span
                  className={classNames(
                    'inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium border',
                    getProjectStatusColor(project.status),
                  )}
                >
                  {getProjectStatusIcon(project.status)}
                  <span className="ml-2">{getProjectStatusText(project.status)}</span>
                </span>
                <Link
                  to={`/admin/projects/edit/${project.id}`}
                  className="inline-flex items-center px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                >
                  <FaEdit className="w-4 h-4 mr-2" />
                  Düzenle
                </Link>
              </div>
            </div>
          </div>
        </div>

        <div className="mx-auto py-2">
          {/* Summary Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
            {/* Progress Card */}
            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
              <div className="flex items-center justify-between mb-2">
                <div className="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
                  <FaBullseye className="w-5 h-5 text-blue-600" />
                </div>
                <span className="text-lg font-bold text-blue-600">{project.progress}%</span>
              </div>
              <h3 className="text-sm font-medium text-gray-600 mb-1.5">İlerleme</h3>
              <div className="w-full bg-gray-200 rounded-full h-1.5">
                <div
                  className={classNames('h-1.5 rounded-full', getProgressColor(project.progress))}
                  style={{ width: `${project.progress}%` }}
                />
              </div>
            </div>

            {/* Budget Card */}
            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
              <div className="flex items-center justify-between mb-2">
                <div className="w-7 h-7 bg-green-100 rounded-lg flex items-center justify-center">
                  <FaDollarSign className="w-5 h-5 text-green-600" />
                </div>
                <span className="text-lg font-bold text-green-600">
                  {budgetUsagePercentage.toFixed(0)}%
                </span>
              </div>
              <h3 className="text-sm font-medium text-gray-600 mb-1">Bütçe Kullanımı</h3>
              <div className="text-xs text-gray-500">
                ₺{project.actualCost.toLocaleString()} / ₺{project.budget.toLocaleString()}
              </div>
            </div>

            {/* Time Progress Card */}
            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
              <div className="flex items-center justify-between mb-2">
                <div className="w-7 h-7 bg-orange-100 rounded-lg flex items-center justify-center">
                  <FaClock className="w-5 h-5 text-orange-600" />
                </div>
                <span className="text-lg font-bold text-orange-600">
                  {timeProgress.toFixed(0)}%
                </span>
              </div>
              <h3 className="text-sm font-medium text-gray-600 mb-1">Zaman İlerlemesi</h3>
              <div className="text-xs text-gray-500">
                {timeElapsed} / {totalDuration} gün
              </div>
            </div>

            {/* Priority Card */}
            <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3">
              <div className="flex items-center justify-between mb-2">
                <div className="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center">
                  <FaFlag className="w-5 h-5 text-red-600" />
                </div>
                <span
                  className={classNames('text-lg font-bold', getPriorityColor(project.priority))}
                >
                  {getPriorityText(project.priority)}
                </span>
              </div>
              <h3 className="text-sm font-medium text-gray-600 mb-1">Öncelik</h3>
              <span
                className={classNames(
                  'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border',
                  getProjectTypeColor(project.projectType),
                )}
              >
                {getProjectTypeText(project.projectType)}
              </span>
            </div>
          </div>

          {/* Tabs */}
          <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div className="border-b border-gray-200">
              <nav className="flex space-x-4 px-3" aria-label="Tabs">
                {tabs.map((tab) => {
                  const Icon = tab.icon
                  return (
                    <button
                      key={tab.id}
                      onClick={() => setActiveTab(tab.id)}
                      className={classNames(
                        'py-2 px-1 border-b-2 font-medium text-sm flex items-center space-x-2 transition-colors',
                        activeTab === tab.id
                          ? 'border-blue-500 text-blue-600'
                          : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
                      )}
                    >
                      <Icon className="w-4 h-4" />
                      <span>{tab.name}</span>
                    </button>
                  )
                })}
              </nav>
            </div>

            <div className="p-3">
              {activeTab === 'overview' && (
                <div className="space-y-3">
                  {/* Project Info Grid */}
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
                    {/* Project Details */}
                    <div className="space-y-3">
                      <div>
                        <h3 className="text-base font-semibold text-gray-900 mb-2">
                          Proje Detayları
                        </h3>
                        <div className="bg-gray-50 rounded-lg p-2.5 space-y-1.5 text-sm">
                          <div className="flex justify-between items-center">
                            <span className="text-gray-600">Proje Kodu:</span>
                            <span className="font-medium text-gray-900">{project.code}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-600">Proje Türü:</span>
                            <span
                              className={classNames(
                                'px-2 py-0.5 rounded-full text-xs font-medium border',
                                getProjectTypeColor(project.projectType),
                              )}
                            >
                              {getProjectTypeText(project.projectType)}
                            </span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-600">Başlangıç Tarihi:</span>
                            <span className="font-medium text-gray-900">
                              {dayjs(project.startDate).format('DD.MM.YYYY')}
                            </span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-600">Bitiş Tarihi:</span>
                            <span className="font-medium text-gray-900">
                              {dayjs(project.endDate).format('DD.MM.YYYY')}
                            </span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-600">Gerçek Başlangıç:</span>
                            <span className="font-medium text-gray-900">
                              {project.actualStartDate
                                ? dayjs(project.actualStartDate).format('DD.MM.YYYY')
                                : 'Henüz başlamadı'}
                            </span>
                          </div>
                        </div>
                      </div>

                      {/* Description */}
                      {project.description && (
                        <div>
                          <h3 className="text-base font-semibold text-gray-900 mb-2">Açıklama</h3>
                          <div className="bg-gray-50 rounded-lg p-2.5">
                            <p className="text-sm text-gray-700 leading-relaxed">
                              {project.description}
                            </p>
                          </div>
                        </div>
                      )}
                    </div>

                    {/* Stakeholders */}
                    <div className="space-y-3">
                      {/* Project Manager */}
                      <div>
                        <h3 className="text-base font-semibold text-gray-900 mb-2">
                          Proje Yöneticisi
                        </h3>
                        {project.projectManager && (
                          <div className="bg-gray-50 rounded-lg p-2.5">
                            <div className="flex items-center space-x-2">
                              <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                <FaUser className="w-6 h-6 text-blue-600" />
                              </div>
                              <div>
                                <h4 className="font-medium text-gray-900">
                                  {project.projectManager.fullName}
                                </h4>
                                <p className="text-gray-600">
                                  {project.projectManager.jobPosition?.name || 'Proje Yöneticisi'}
                                </p>
                                <div className="flex items-center mt-1 text-sm text-gray-500">
                                  <FaEnvelope className="w-3 h-3 mr-1" />
                                  {project.projectManager.email}
                                </div>
                                {project.projectManager.phone && (
                                  <div className="flex items-center mt-1 text-sm text-gray-500">
                                    <FaPhone className="w-3 h-3 mr-1" />
                                    {project.projectManager.phone}
                                  </div>
                                )}
                              </div>
                            </div>
                          </div>
                        )}
                      </div>

                      {/* Customer */}
                      {project.customer && (
                        <div>
                          <h3 className="text-base font-semibold text-gray-900 mb-2">Müşteri</h3>
                          <div className="bg-gray-50 rounded-lg p-2.5">
                            <div className="flex items-center space-x-2">
                              <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                <FaBuilding className="w-6 h-6 text-green-600" />
                              </div>
                              <div>
                                <h4 className="font-medium text-gray-900">
                                  {project.customer.name}
                                </h4>
                                <p className="text-gray-600">
                                  {project.customer.primaryContact?.firstName}{' '}
                                  {project.customer.primaryContact?.lastName}
                                </p>
                                {project.customer.primaryContact?.email && (
                                  <div className="flex items-center mt-1 text-sm text-gray-500">
                                    <FaEnvelope className="w-3 h-3 mr-1" />
                                    {project.customer.primaryContact.email}
                                  </div>
                                )}
                                {project.customer.primaryContact?.phone && (
                                  <div className="flex items-center mt-1 text-sm text-gray-500">
                                    <FaPhone className="w-3 h-3 mr-1" />
                                    {project.customer.primaryContact.phone}
                                  </div>
                                )}
                              </div>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )}

              {activeTab === 'phases' && (
                <div className="space-y-3">
                  {/* Phases List */}
                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <div className="divide-y divide-gray-200">
                      {mockProjectPhases.filter((phase) => phase.projectId === project.id).length >
                      0 ? (
                        mockProjectPhases
                          .filter((phase) => phase.projectId === project.id)
                          .map((phase) => (
                            <div key={phase.id} className="px-3 py-2 hover:bg-gray-50">
                              <div className="flex items-start justify-between">
                                <div className="flex-1">
                                  <div className="flex items-center space-x-2 mb-1.5">
                                    <h4 className="text-sm font-medium text-gray-900">
                                      {phase.name}
                                    </h4>
                                    <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                      {phase.code}
                                    </span>
                                    <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                      {phase.status}
                                    </span>
                                  </div>
                                  <p className="text-sm text-gray-600 mb-1.5">
                                    {phase.description}
                                  </p>
                                  <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-1.5">
                                    <div>
                                      <p className="text-xs font-medium text-gray-700">Başlangıç</p>
                                      <p className="text-xs text-gray-600">
                                        {dayjs(phase.startDate).format('DD.MM.YYYY')}
                                      </p>
                                    </div>
                                    <div>
                                      <p className="text-xs font-medium text-gray-700">Bitiş</p>
                                      <p className="text-xs text-gray-600">
                                        {dayjs(phase.endDate).format('DD.MM.YYYY')}
                                      </p>
                                    </div>
                                    <div>
                                      <p className="text-xs font-medium text-gray-700">Bütçe</p>
                                      <p className="text-xs text-gray-600">
                                        ₺{phase.budget.toLocaleString()}
                                      </p>
                                    </div>
                                    <div>
                                      <p className="text-xs font-medium text-gray-700">İlerleme</p>
                                      <p className="text-xs text-gray-600">%{phase.progress}</p>
                                    </div>
                                  </div>
                                  <div className="w-full bg-gray-200 rounded-full h-1.5">
                                    <div
                                      className="bg-blue-500 h-1.5 rounded-full"
                                      style={{ width: `${phase.progress}%` }}
                                    />
                                  </div>
                                </div>
                                <div className="flex items-center space-x-1 ml-2">
                                  <button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
                                    <FaFlag className="w-4 h-4" />
                                  </button>
                                </div>
                              </div>
                            </div>
                          ))
                      ) : (
                        <div className="px-3 py-5 text-center">
                          <FaFlag className="mx-auto h-12 w-12 text-gray-400" />
                          <h3 className="mt-2 text-sm font-medium text-gray-900">Faz bulunamadı</h3>
                          <p className="mt-1 text-sm text-gray-500">
                            Bu proje için henüz faz tanımlanmamış.
                          </p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )}

              {activeTab === 'tasks' && (
                <div className="space-y-3">
                  {/* Tasks List */}
                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <div className="divide-y divide-gray-200">
                      {mockProjectTasks.filter((task) => task.projectId === project.id).length >
                      0 ? (
                        mockProjectTasks
                          .filter((task) => task.projectId === project.id)
                          .map((task) => (
                            <div key={task.id} className="px-3 py-2 hover:bg-gray-50">
                              <div className="flex items-start justify-between">
                                <div className="flex-1">
                                  <div className="flex items-center space-x-2 mb-1.5">
                                    <h4 className="text-sm font-medium text-gray-900">
                                      {task.name}
                                    </h4>
                                    <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                      {task.taskCode}
                                    </span>
                                    <span
                                      className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
                                        task.status === TaskStatusEnum.Completed
                                          ? 'bg-green-100 text-green-800'
                                          : task.status === TaskStatusEnum.InProgress
                                            ? 'bg-yellow-100 text-yellow-800'
                                            : task.status === TaskStatusEnum.NotStarted
                                              ? 'bg-gray-100 text-gray-800'
                                              : 'bg-red-100 text-red-800'
                                      }`}
                                    >
                                      {task.status === TaskStatusEnum.Completed
                                        ? 'Tamamlandı'
                                        : task.status === TaskStatusEnum.InProgress
                                          ? 'Devam Ediyor'
                                          : task.status === TaskStatusEnum.NotStarted
                                            ? 'Başlamadı'
                                            : task.status}
                                    </span>
                                    <span
                                      className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
                                        task.priority === PriorityEnum.High
                                          ? 'bg-red-100 text-red-800'
                                          : task.priority === PriorityEnum.Normal
                                            ? 'bg-orange-100 text-orange-800'
                                            : 'bg-green-100 text-green-800'
                                      }`}
                                    >
                                      {task.priority === PriorityEnum.High
                                        ? 'Yüksek'
                                        : task.priority === PriorityEnum.Normal
                                          ? 'Normal'
                                          : task.priority === PriorityEnum.Urgent
                                            ? 'Acil'
                                            : 'Düşük'}
                                    </span>
                                  </div>
                                  <p className="text-sm text-gray-600 mb-2">{task.description}</p>
                                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-2">
                                    <div>
                                      <p className="text-xs font-medium text-gray-700">Başlangıç</p>
                                      <p className="text-xs text-gray-600">
                                        {dayjs(task.startDate).format('DD.MM.YYYY')}
                                      </p>
                                    </div>
                                    <div>
                                      <p className="text-xs font-medium text-gray-700">Bitiş</p>
                                      <p className="text-xs text-gray-600">
                                        {dayjs(task.endDate).format('DD.MM.YYYY')}
                                      </p>
                                    </div>
                                    <div>
                                      <p className="text-xs font-medium text-gray-700">
                                        Tahmini Saat
                                      </p>
                                      <p className="text-xs text-gray-600">
                                        {task.estimatedHours}h
                                      </p>
                                    </div>
                                    <div>
                                      <p className="text-xs font-medium text-gray-700">İlerleme</p>
                                      <p className="text-xs text-gray-600">%{task.progress}</p>
                                    </div>
                                  </div>
                                  <div className="w-full bg-gray-200 rounded-full h-1.5">
                                    <div
                                      className={`h-1.5 rounded-full ${
                                        task.progress >= 90
                                          ? 'bg-green-500'
                                          : task.progress >= 70
                                            ? 'bg-blue-500'
                                            : task.progress >= 50
                                              ? 'bg-yellow-500'
                                              : 'bg-red-500'
                                      }`}
                                      style={{ width: `${task.progress}%` }}
                                    />
                                  </div>
                                </div>
                                <div className="flex items-center space-x-1 ml-2">
                                  <button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
                                    <FaTasks className="w-4 h-4" />
                                  </button>
                                </div>
                              </div>
                            </div>
                          ))
                      ) : (
                        <div className="px-3 py-5 text-center">
                          <FaTasks className="mx-auto h-12 w-12 text-gray-400" />
                          <h3 className="mt-2 text-sm font-medium text-gray-900">
                            Görev bulunamadı
                          </h3>
                          <p className="mt-1 text-sm text-gray-500">
                            Bu proje için henüz görev tanımlanmamış.
                          </p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )}

              {activeTab === 'documents' && (
                <div className="space-y-3">
                  {/* Documents List */}
                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <div className="divide-y divide-gray-200">
                      {project.documents.length > 0 ? (
                        project.documents.map((doc) => (
                          <div key={doc.id} className="px-3 py-2 hover:bg-gray-50">
                            <div className="flex items-center justify-between">
                              <div className="flex items-center space-x-2">
                                <div className="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
                                  <FaFileAlt className="w-4 h-4 text-blue-600" />
                                </div>
                                <div>
                                  <h4 className="text-sm font-medium text-gray-900">
                                    {doc.documentName}
                                  </h4>
                                  <div className="flex items-center space-x-3 text-xs text-gray-500 mt-1">
                                    <span>{doc.documentType}</span>
                                    <span>{doc.fileSize} MB</span>
                                    <span>{dayjs(doc.uploadedAt).format('DD.MM.YYYY')}</span>
                                    <span>Yükleyen: {doc.uploadedBy}</span>
                                  </div>
                                </div>
                              </div>
                              <div className="flex items-center space-x-1 ml-2">
                                <button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
                                  <FaFolder className="w-4 h-4" />
                                </button>
                              </div>
                            </div>
                          </div>
                        ))
                      ) : (
                        <div className="px-3 py-5 text-center">
                          <FaFileAlt className="mx-auto h-12 w-12 text-gray-400" />
                          <h3 className="mt-2 text-sm font-medium text-gray-900">
                            Belge bulunamadı
                          </h3>
                          <p className="mt-1 text-sm text-gray-500">
                            Bu proje için henüz belge yüklenmemiş.
                          </p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )}

              {activeTab === 'risks' && (
                <div className="space-y-3">
                  {/* Risks List */}
                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <div className="divide-y divide-gray-200">
                      {project.risks.length > 0 ? (
                        project.risks.map((risk) => (
                          <div key={risk.id} className="px-3 py-2 hover:bg-gray-50">
                            <div className="flex items-start justify-between">
                              <div className="flex-1">
                                <div className="flex items-center space-x-2 mb-1.5">
                                  <h4 className="text-sm font-medium text-gray-900">
                                    {risk.title}
                                  </h4>
                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                    {risk.riskLevel}
                                  </span>
                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    {risk.status}
                                  </span>
                                </div>
                                <p className="text-sm text-gray-600 mb-1.5">{risk.description}</p>
                                {risk.mitigationPlan && (
                                  <div className="bg-gray-50 rounded-lg p-2 mb-2">
                                    <p className="text-xs font-medium text-gray-700 mb-1">
                                      Önlem Planı:
                                    </p>
                                    <p className="text-xs text-gray-600">{risk.mitigationPlan}</p>
                                  </div>
                                )}
                                <div className="flex items-center space-x-3 text-xs text-gray-500">
                                  <span>Risk Kodu: {risk.riskCode}</span>
                                  <span>
                                    Tanımlama: {dayjs(risk.identifiedDate).format('DD.MM.YYYY')}
                                  </span>
                                </div>
                              </div>
                              <div className="flex items-center space-x-1 ml-2">
                                <button className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg">
                                  <FaExclamationCircle className="w-4 h-4" />
                                </button>
                              </div>
                            </div>
                          </div>
                        ))
                      ) : (
                        <div className="px-3 py-5 text-center">
                          <FaExclamationCircle className="mx-auto h-12 w-12 text-gray-400" />
                          <h3 className="mt-2 text-sm font-medium text-gray-900">
                            Risk bulunamadı
                          </h3>
                          <p className="mt-1 text-sm text-gray-500">
                            Bu proje için henüz risk tanımlanmamış.
                          </p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )}

              {/* Financial Summary Tab */}
              {activeTab === 'financial' && (
                <div className="space-y-3">
                  {/* Overview Cards */}
                  <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
                    <div className="bg-white rounded-lg border border-gray-200 p-3">
                      <div className="flex items-center">
                        <div className="p-1.5 bg-blue-100 rounded-lg">
                          <FaDollarSign className="h-5 w-5 text-blue-600" />
                        </div>
                        <div className="ml-2">
                          <p className="text-sm font-medium text-gray-500">Toplam Bütçe</p>
                          <p className="text-base font-semibold text-gray-900">
                            ₺{project.budget.toLocaleString()}
                          </p>
                        </div>
                      </div>
                    </div>

                    <div className="bg-white rounded-lg border border-gray-200 p-3">
                      <div className="flex items-center">
                        <div className="p-1.5 bg-red-100 rounded-lg">
                          <FaDollarSign className="h-5 w-5 text-red-600" />
                        </div>
                        <div className="ml-2">
                          <p className="text-sm font-medium text-gray-500">Harcanan</p>
                          <p className="text-base font-semibold text-gray-900">
                            ₺{project.actualCost.toLocaleString()}
                          </p>
                        </div>
                      </div>
                    </div>

                    <div className="bg-white rounded-lg border border-gray-200 p-3">
                      <div className="flex items-center">
                        <div className="p-1.5 bg-green-100 rounded-lg">
                          <FaDollarSign className="h-5 w-5 text-green-600" />
                        </div>
                        <div className="ml-2">
                          <p className="text-sm font-medium text-gray-500">Kalan Bütçe</p>
                          <p className="text-base font-semibold text-gray-900">
                            ₺{(project.budget - project.actualCost).toLocaleString()}
                          </p>
                        </div>
                      </div>
                    </div>

                    <div className="bg-white rounded-lg border border-gray-200 p-3">
                      <div className="flex items-center">
                        <div className="p-1.5 bg-orange-100 rounded-lg">
                          <FaChartLine className="h-5 w-5 text-orange-600" />
                        </div>
                        <div className="ml-2">
                          <p className="text-sm font-medium text-gray-500">Kullanım Oranı</p>
                          <p className="text-base font-semibold text-gray-900">
                            %{budgetUsagePercentage.toFixed(1)}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Budget Progress */}
                  <div className="bg-white rounded-lg border border-gray-200 p-3">
                    <h3 className="text-base font-semibold text-gray-900 mb-2">
                      Bütçe Kullanım Durumu
                    </h3>
                    <div className="space-y-2">
                      <div className="flex justify-between text-xs">
                        <span>Harcanan: ₺{project.actualCost.toLocaleString()}</span>
                        <span>Toplam: ₺{project.budget.toLocaleString()}</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2.5">
                        <div
                          className={`h-2.5 rounded-full transition-all duration-300 ${
                            budgetUsagePercentage > 90
                              ? 'bg-red-500'
                              : budgetUsagePercentage > 70
                                ? 'bg-orange-500'
                                : 'bg-green-500'
                          }`}
                          style={{
                            width: `${Math.min(budgetUsagePercentage, 100)}%`,
                          }}
                        />
                      </div>
                      <div
                        className={`text-xs font-medium ${
                          budgetUsagePercentage > 90
                            ? 'text-red-600'
                            : budgetUsagePercentage > 70
                              ? 'text-orange-600'
                              : 'text-green-600'
                        }`}
                      >
                        {budgetUsagePercentage > 90
                          ? 'Kritik Seviye - Bütçe Aşımı Riski'
                          : budgetUsagePercentage > 70
                            ? 'Dikkat - Yüksek Kullanım'
                            : 'Normal Seviye'}
                      </div>
                    </div>
                  </div>

                  {/* Phase Costs */}
                  <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <div className="px-3 py-2 border-b border-gray-200">
                      <h3 className="text-base font-semibold text-gray-900">
                        Faz Bazında Maliyet Analizi
                      </h3>
                    </div>
                    <div className="overflow-x-auto">
                      <table className="min-w-full divide-y divide-gray-200 text-sm">
                        <thead className="bg-gray-50">
                          <tr>
                            <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Faz Adı
                            </th>
                            <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Bütçe
                            </th>
                            <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Harcanan
                            </th>
                            <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Kalan
                            </th>
                            <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Kullanım %
                            </th>
                            <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Durum
                            </th>
                          </tr>
                        </thead>
                        <tbody className="bg-white divide-y divide-gray-200">
                          {mockProjectPhases
                            .filter((phase) => phase.projectId === project.id)
                            .map((phase) => {
                              const phaseUsage = (phase.actualCost / phase.budget) * 100
                              return (
                                <tr key={phase.id} className="hover:bg-gray-50">
                                  <td className="px-3 py-2 whitespace-nowrap">
                                    <div className="flex flex-col">
                                      <div className="text-sm font-medium text-gray-900">
                                        {phase.name}
                                      </div>
                                      <div className="text-sm text-gray-500">{phase.code}</div>
                                    </div>
                                  </td>
                                  <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
                                    ₺{phase.budget.toLocaleString()}
                                  </td>
                                  <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
                                    ₺{phase.actualCost.toLocaleString()}
                                  </td>
                                  <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
                                    ₺{(phase.budget - phase.actualCost).toLocaleString()}
                                  </td>
                                  <td className="px-3 py-2 whitespace-nowrap">
                                    <div className="flex items-center">
                                      <div className="w-14 bg-gray-200 rounded-full h-1.5 mr-2">
                                        <div
                                          className={`h-1.5 rounded-full ${
                                            phaseUsage > 90
                                              ? 'bg-red-500'
                                              : phaseUsage > 70
                                                ? 'bg-orange-500'
                                                : 'bg-green-500'
                                          }`}
                                          style={{
                                            width: `${Math.min(phaseUsage, 100)}%`,
                                          }}
                                        />
                                      </div>
                                      <span className="text-sm text-gray-900">
                                        {phaseUsage.toFixed(1)}%
                                      </span>
                                    </div>
                                  </td>
                                  <td className="px-3 py-2 whitespace-nowrap">
                                    <span
                                      className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${
                                        phaseUsage > 100
                                          ? 'bg-red-100 text-red-800'
                                          : phaseUsage > 90
                                            ? 'bg-orange-100 text-orange-800'
                                            : phaseUsage > 70
                                              ? 'bg-yellow-100 text-yellow-800'
                                              : 'bg-green-100 text-green-800'
                                      }`}
                                    >
                                      {phaseUsage > 100
                                        ? 'Bütçe Aşımı'
                                        : phaseUsage > 90
                                          ? 'Kritik'
                                          : phaseUsage > 70
                                            ? 'Dikkat'
                                            : 'Normal'}
                                    </span>
                                  </td>
                                </tr>
                              )
                            })}
                        </tbody>
                      </table>
                    </div>
                  </div>

                  {/* Cost Breakdown */}
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
                    <div className="bg-white rounded-lg border border-gray-200 p-3">
                      <h3 className="text-base font-semibold text-gray-900 mb-2">
                        Maliyet Kategorileri
                      </h3>
                      <div className="space-y-2">
                        <div className="flex justify-between items-center">
                          <span className="text-sm text-gray-600">Personel Maliyeti</span>
                          <span className="text-sm font-medium text-gray-900">
                            ₺{(project.actualCost * 0.6).toLocaleString()}
                          </span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span className="text-sm text-gray-600">Malzeme Maliyeti</span>
                          <span className="text-sm font-medium text-gray-900">
                            ₺{(project.actualCost * 0.25).toLocaleString()}
                          </span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span className="text-sm text-gray-600">İş Merkezi Maliyeti</span>
                          <span className="text-sm font-medium text-gray-900">
                            ₺{(project.actualCost * 0.1).toLocaleString()}
                          </span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span className="text-sm text-gray-600">Diğer Giderler</span>
                          <span className="text-sm font-medium text-gray-900">
                            ₺{(project.actualCost * 0.05).toLocaleString()}
                          </span>
                        </div>
                      </div>
                    </div>

                    <div className="bg-white rounded-lg border border-gray-200 p-3">
                      <h3 className="text-base font-semibold text-gray-900 mb-2">
                        Maliyet Analizi
                      </h3>
                      <div className="space-y-2">
                        <div>
                          <div className="flex justify-between mb-1">
                            <span className="text-sm text-gray-600">Ortalama Günlük Harcama</span>
                            <span className="text-sm font-medium text-gray-900">
                              ₺
                              {Math.round(
                                project.actualCost / Math.max(timeElapsed, 1),
                              ).toLocaleString()}
                            </span>
                          </div>
                        </div>
                        <div>
                          <div className="flex justify-between mb-1">
                            <span className="text-sm text-gray-600">
                              Tahmini Proje Sonu Maliyeti
                            </span>
                            <span className="text-sm font-medium text-gray-900">
                              ₺
                              {Math.round(
                                (project.actualCost / Math.max(project.progress, 1)) * 100,
                              ).toLocaleString()}
                            </span>
                          </div>
                        </div>
                        <div>
                          <div className="flex justify-between mb-1">
                            <span className="text-sm text-gray-600">Maliyet Varyansı</span>
                            <span
                              className={`text-sm font-medium ${
                                project.actualCost > project.budget
                                  ? 'text-red-600'
                                  : 'text-green-600'
                              }`}
                            >
                              {project.actualCost > project.budget ? '+' : ''}₺
                              {(project.actualCost - project.budget).toLocaleString()}
                            </span>
                          </div>
                        </div>
                        <div>
                          <div className="flex justify-between mb-1">
                            <span className="text-sm text-gray-600">
                              CPI (Maliyet Performans İndeksi)
                            </span>
                            <span
                              className={`text-sm font-medium ${
                                project.budget / project.actualCost >= 1
                                  ? 'text-green-600'
                                  : 'text-red-600'
                              }`}
                            >
                              {(project.budget / project.actualCost).toFixed(2)}
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </Container>
  )
}

export default ProjectView
