import React, { useState } from 'react'
import {
  FaUsers,
  FaEye,
  FaEdit,
  FaPlus,
  FaChartBar,
  FaTimes,
  FaSave,
  FaPlay,
  FaPoll,
} from 'react-icons/fa'
import {
  HrEvaluation360,
  CampaignStatusEnum,
  AssessorTypeEnum,
  ParticipantStatusEnum,
  QuestionTypeEnum,
  ResultStatusEnum,
  HrEvaluation360Result,
  HrGroupScore,
  HrAssessorTypeScore,
} from '../../../types/hr'
import DataTable, { Column } from '../../../components/common/DataTable'
import { mockEvaluation360 } from '../../../mocks/mockEvaluation360'
import { mockEvaluation360Results } from '../../../mocks/mockEvaluation360Results'
import { mockEmployees } from '../../../mocks/mockEmployees'
import { mockDepartments } from '../../../mocks/mockDepartments'
import { mockEvaluation360Templates } from '../../../mocks/mockEvaluation360Templates'
import { mockBusinessParties } from '../../../mocks/mockBusinessParties'
import Widget from '../../../components/common/Widget'
import {
  getAssessorTypeDescription,
  getAssessorTypeText,
  getParticipantStatusColor,
  getParticipantStatusText,
  getCampaignStatusColor,
  getCampaignStatusText,
} from '../../../utils/erp'
import { Container } from '@/components/shared'

const Degree360Evaluation: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'campaigns' | 'results'>('campaigns')
  const [selectedStatus, setSelectedStatus] = useState<string>('all')
  const [selectedEmployee, setSelectedEmployee] = useState<string>('all')
  const [selectedDepartment, setSelectedDepartment] = useState<string>('all')

  // Results tab filters
  const [selectedResultsStatus, setSelectedResultsStatus] = useState<string>('all')
  const [selectedResultsEmployee, setSelectedResultsEmployee] = useState<string>('all')
  const [selectedResultsDepartment, setSelectedResultsDepartment] = useState<string>('all')
  const [selectedResultsCampaign, setSelectedResultsCampaign] = useState<string>('all')

  // Modal states
  const [showCampaignModal, setShowCampaignModal] = useState(false)
  const [showViewModal, setShowViewModal] = useState(false)
  const [showEvaluationModal, setShowEvaluationModal] = useState(false)
  const [showResultDetailModal, setShowResultDetailModal] = useState(false)
  const [showResultEditModal, setShowResultEditModal] = useState(false)
  const [selectedCampaign, setSelectedCampaign] = useState<HrEvaluation360 | null>(null)
  const [selectedResult, setSelectedResult] = useState<{
    resultId: string
    evaluatedEmployeeName: string
    evaluatorName: string
    campaignName: string
    overallScore: number
    scorePercentage: number
    evaluatedEmployeeId: string
    evaluatorId: string
    campaignId: string
    evaluatorType: AssessorTypeEnum
    status: ParticipantStatusEnum
    completedDate?: Date
  } | null>(null)

  // Evaluation states
  const [evaluationTarget, setEvaluationTarget] = useState<string>('')
  const [evaluationEvaluator, setEvaluationEvaluator] = useState<string>('')
  const [selectedAssessorType, setSelectedAssessorType] = useState<AssessorTypeEnum | null>(null)
  const [externalEvaluatorName, setExternalEvaluatorName] = useState<string>('')
  const [externalEvaluatorEmail, setExternalEvaluatorEmail] = useState<string>('')
  const [selectedCustomerId, setSelectedCustomerId] = useState<string>('')
  const [evaluatorSearchTerm, setEvaluatorSearchTerm] = useState<string>('')
  const [currentCampaignForEvaluation, setCurrentCampaignForEvaluation] =
    useState<HrEvaluation360 | null>(null)

  // Evaluation responses state
  const [evaluationResponses, setEvaluationResponses] = useState<Record<string, string | number>>(
    {},
  )

  // Edit modal states
  const [editResponses, setEditResponses] = useState<Record<string, string | number>>({})
  const [editManagerComments, setEditManagerComments] = useState<string>('')
  const [editHrComments, setEditHrComments] = useState<string>('')
  const [editResultStatus, setEditResultStatus] = useState<string>('PENDING')

  // Form states
  const [campaignFormData, setCampaignFormData] = useState({
    name: '',
    description: '',
    templateId: '',
    departmentId: '',
    targetEmployees: [] as string[],
    startDate: '',
    endDate: '',
  })

  // Event handlers
  const handleCloseModal = () => {
    setShowCampaignModal(false)
    setShowViewModal(false)
    setShowEvaluationModal(false)
    setShowResultDetailModal(false)
    setShowResultEditModal(false)
    setSelectedCampaign(null)
    setSelectedResult(null)
    setEvaluationTarget('')
    setEvaluationEvaluator('')
    setSelectedAssessorType(null)
    setExternalEvaluatorName('')
    setExternalEvaluatorEmail('')
    setSelectedCustomerId('')
    setEvaluatorSearchTerm('')
    setCurrentCampaignForEvaluation(null)
    setEvaluationResponses({})
    setEditResponses({})
    setEditManagerComments('')
    setEditHrComments('')
    setEditResultStatus('PENDING')
    setCampaignFormData({
      name: '',
      description: '',
      templateId: '',
      departmentId: '',
      targetEmployees: [],
      startDate: '',
      endDate: '',
    })
  }

  // Response handling functions
  const handleResponseChange = (questionId: string, value: string | number) => {
    setEvaluationResponses((prev) => ({
      ...prev,
      [questionId]: value,
    }))
  }

  // Edit response handling function
  const handleEditResponseChange = (questionId: string, value: string | number) => {
    setEditResponses((prev) => ({
      ...prev,
      [questionId]: value,
    }))
  }

  // Evaluation kaydetme fonksiyonu
  const handleSaveEvaluation = () => {
    if (!currentCampaignForEvaluation || !evaluationTarget || !evaluationEvaluator) {
      alert('Tüm alanları doldurun!')
      return
    }

    const template = mockEvaluation360Templates.find(
      (t) => t.id === currentCampaignForEvaluation.templateId,
    )

    if (!template) {
      alert('Template bulunamadı!')
      return
    }

    // Responses oluştur
    const responses = Object.entries(evaluationResponses).map(([questionId, responseValue]) => {
      const question = template.questionGroups
        .flatMap((g) => g.questions)
        .find((q) => q.id === questionId)

      let score = 0
      if (question) {
        if (question.questionType === QuestionTypeEnum.Rating) {
          score = Number(responseValue)
        } else if (question.questionType === QuestionTypeEnum.YesNo) {
          score = responseValue === 'yes' ? question.maxRating || 5 : question.minRating || 1
        } else if (question.questionType === QuestionTypeEnum.MultipleChoice) {
          const option = question.options?.find((o) => o.value === Number(responseValue))
          score = option?.value || 0
        }
      }

      return {
        id: `response-${Date.now()}-${Math.random()}`,
        participantId: `participant-${Date.now()}`,
        questionId,
        question,
        responseValue,
        responseText: typeof responseValue === 'string' ? responseValue : undefined,
        score,
        submittedDate: new Date(),
      }
    })

    // Puanları hesapla
    const totalScore = responses.reduce((sum, response) => sum + response.score, 0)
    const maxScore = template.questionGroups
      .flatMap((g) => g.questions)
      .reduce((sum, q) => sum + (q.maxRating || 5), 0)

    const scorePercentage = maxScore > 0 ? (totalScore / maxScore) * 100 : 0

    // Grup skorlarını hesapla
    const groupScores: HrGroupScore[] = template.questionGroups.map((group) => {
      const groupResponses = responses.filter((r) =>
        group.questions.some((q) => q.id === r.questionId),
      )
      const groupScore = groupResponses.reduce((sum, r) => sum + r.score, 0)
      const groupMaxScore = group.questions.reduce((sum, q) => sum + (q.maxRating || 5), 0)

      return {
        groupId: group.id,
        groupName: group.groupName,
        score: groupScore,
        maxScore: groupMaxScore,
        percentage: groupMaxScore > 0 ? (groupScore / groupMaxScore) * 100 : 0,
        responseCount: groupResponses.length,
      }
    })

    // Assessor type skorlarını hesapla
    const assessorTypeScores: HrAssessorTypeScore[] = [
      {
        assessorType: selectedAssessorType!,
        assessorCount: 1,
        averageScore: totalScore,
        maxScore: maxScore,
        percentage: scorePercentage,
      },
    ]

    // Evaluation360Result oluştur
    const evaluationResult: HrEvaluation360Result = {
      id: `result-${Date.now()}`,
      campaignId: currentCampaignForEvaluation.id,
      employeeId: evaluationTarget,
      employee: mockEmployees.find((e) => e.id === evaluationTarget),
      participants: [
        {
          id: `participant-${Date.now()}`,
          campaignId: currentCampaignForEvaluation.id,
          evaluatedEmployeeId: evaluationTarget,
          evaluatedEmployee: mockEmployees.find((e) => e.id === evaluationTarget),
          evaluatorId: evaluationEvaluator,
          evaluator:
            selectedAssessorType === AssessorTypeEnum.External ||
            selectedAssessorType === AssessorTypeEnum.Customer
              ? undefined // External ve Customer için Employee bilgisi yok
              : mockEmployees.find((e) => e.id === evaluationEvaluator),
          evaluatorType: selectedAssessorType!,
          status: ParticipantStatusEnum.Completed,
          invitedDate: new Date(),
          startedDate: new Date(),
          completedDate: new Date(),
          responses,
          overallScore: totalScore,
          notes: '',
        },
      ],
      overallScore: totalScore,
      maxPossibleScore: maxScore,
      scorePercentage,
      groupScores,
      assessorTypeScores,
      strengths: ['Güçlü iletişim', 'Takım çalışması'], // Örnek veriler
      developmentAreas: ['Zaman yönetimi', 'Teknik beceriler'], // Örnek veriler
      actionPlan: ['Zaman yönetimi kursu alma', 'Teknik eğitimlere katılma'], // Örnek veriler
      managerComments: '',
      hrComments: '',
      status: ResultStatusEnum.Pending,
      generatedDate: new Date(),
      approvedBy: undefined,
      approvedDate: undefined,
    }

    // Console'a yazdır
    console.log('Evaluation360Result:', evaluationResult)

    alert('Değerlendirme başarıyla kaydedildi! Sonuç konsola yazdırıldı.')
    handleCloseModal()
  }

  const handleNewCampaign = () => {
    setSelectedCampaign(null)
    setShowCampaignModal(true)
  }

  const handleEditCampaign = (campaign: HrEvaluation360 | null) => {
    if (campaign) {
      setSelectedCampaign(campaign)
      setCampaignFormData({
        name: campaign.name,
        description: campaign.description,
        templateId: campaign.templateId,
        departmentId: campaign.departmentId || '',
        targetEmployees: campaign.targetEmployees,
        startDate: campaign.startDate.toISOString().split('T')[0],
        endDate: campaign.endDate.toISOString().split('T')[0],
      })
      setShowCampaignModal(true)
    }
  }

  const handleViewCampaign = (campaign: HrEvaluation360) => {
    setSelectedCampaign(campaign)
    setShowViewModal(true)
  }

  const handleSaveCampaign = () => {
    console.log('Değerlendirme kaydediliyor:', campaignFormData)
    handleCloseModal()
  }

  const handleDepartmentChange = (departmentId: string) => {
    setSelectedDepartment(departmentId)
    setCampaignFormData({
      ...campaignFormData,
      departmentId,
      targetEmployees: [],
    })
  }

  // Değerlendirme yapma handler'ı
  const handleStartEvaluation = () => {
    setCurrentCampaignForEvaluation(null)
    setEvaluationTarget('')
    setEvaluationEvaluator('')
    setShowEvaluationModal(true)
  }

  // Otomatik değerlendirici belirleme fonksiyonu (360° metodolojisi)
  const getEvaluatorsByType = (targetEmployeeId: string, assessorType: AssessorTypeEnum) => {
    const targetEmployee = mockEmployees.find((emp) => emp.id === targetEmployeeId)
    if (!targetEmployee) return []

    switch (assessorType) {
      case AssessorTypeEnum.Self: {
        return [
          {
            id: targetEmployee.id,
            name: targetEmployee.fullName,
            title: targetEmployee.jobPosition?.name,
            department:
              mockDepartments.find((d) => d.id === targetEmployee.departmantId)?.name || '',
            type: 'employee',
          },
        ]
      }

      case AssessorTypeEnum.Manager: {
        const managers = mockEmployees.filter(
          (emp) =>
            emp.departmantId === targetEmployee.departmantId &&
            (typeof emp.jobPosition?.level === 'number' &&
            typeof targetEmployee.jobPosition?.level === 'number'
              ? emp.jobPosition?.level > targetEmployee.jobPosition?.level
              : emp.jobPosition?.name.includes('Müdür') ||
                emp.jobPosition?.name.includes('Manager')),
        )
        return managers.map((emp) => ({
          id: emp.id,
          name: emp.fullName,
          title: emp.jobPosition?.name,
          department: mockDepartments.find((d) => d.id === emp.departmantId)?.name || '',
          type: 'employee',
        }))
      }

      case AssessorTypeEnum.Peer: {
        const peers = mockEmployees.filter(
          (emp) =>
            emp.id !== targetEmployeeId &&
            emp.departmantId === targetEmployee.departmantId &&
            emp.jobPosition?.level === targetEmployee.jobPosition?.level,
        )
        return peers.map((emp) => ({
          id: emp.id,
          name: emp.fullName,
          title: emp.jobPosition?.name,
          department: mockDepartments.find((d) => d.id === emp.departmantId)?.name || '',
          type: 'employee',
        }))
      }

      case AssessorTypeEnum.Subordinate: {
        const subordinates = mockEmployees.filter(
          (emp) =>
            emp.departmantId === targetEmployee.departmantId &&
            (typeof emp.jobPosition?.level === 'number' &&
            typeof targetEmployee.jobPosition?.level === 'number'
              ? emp.jobPosition?.level < targetEmployee.jobPosition?.level
              : !emp.jobPosition?.name.includes('Müdür') &&
                !emp.jobPosition?.name.includes('Manager')),
        )
        return subordinates.map((emp) => ({
          id: emp.id,
          name: emp.fullName,
          title: emp.jobPosition?.name,
          department: mockDepartments.find((d) => d.id === emp.departmantId)?.name || '',
          type: 'employee',
        }))
      }

      case AssessorTypeEnum.Customer: {
        return mockBusinessParties.map((customer) => ({
          id: customer.id,
          name: customer.name,
          title: 'Müşteri Temsilcisi',
          department: 'Müşteri',
          type: 'customer',
        }))
      }

      case AssessorTypeEnum.External: {
        return [
          {
            id: 'external',
            name: 'Dış Değerlendirici',
            title: 'Harici',
            department: 'Dış Paydaş',
            type: 'external',
          },
        ]
      }

      case AssessorTypeEnum.HRUpperManagement: {
        const hrEmployees = mockEmployees.filter(
          (emp) =>
            emp.id !== targetEmployeeId && (emp.departmantId === 'hr' || emp.departmantId === '3'), // HR departmanı
        )
        return hrEmployees.map((emp) => ({
          id: emp.id,
          name: emp.fullName,
          title: emp.jobPosition?.name,
          department: mockDepartments.find((d) => d.id === emp.departmantId)?.name || '',
          type: 'employee',
        }))
      }

      case AssessorTypeEnum.OtherDepartment: {
        const otherDepartmentEmployees = mockEmployees.filter(
          (emp) => emp.id !== targetEmployeeId && emp.departmantId !== targetEmployee.departmantId,
        )
        return otherDepartmentEmployees.map((emp) => ({
          id: emp.id,
          name: emp.fullName,
          title: emp.jobPosition?.name,
          department: mockDepartments.find((d) => d.id === emp.departmantId)?.name || '',
          type: 'employee',
        }))
      }

      default:
        return []
    }
  }

  // Değerlendiren bilgisini getiren fonksiyon
  const getEvaluatorInfo = () => {
    if (evaluationEvaluator === 'external') {
      return externalEvaluatorName
    }

    if (selectedAssessorType === AssessorTypeEnum.Customer) {
      const customer = mockBusinessParties.find((c) => c.id === selectedCustomerId)
      return customer ? customer.name : 'Müşteri Bulunamadı'
    }

    const employee = mockEmployees.find((e) => e.id === evaluationEvaluator)
    return employee ? employee.fullName : 'Çalışan Bulunamadı'
  }

  // Template'deki izin verilen assessor tiplerini getir
  const getAllowedAssessorTypes = () => {
    if (!currentCampaignForEvaluation) return []

    const template = mockEvaluation360Templates.find(
      (t) => t.id === currentCampaignForEvaluation.templateId,
    )

    return template?.assessorTypes || []
  }

  // Helper function to get participants for a campaign from results
  const getCampaignParticipants = (campaignId: string) => {
    return mockEvaluation360Results
      .filter((result) => result.campaignId === campaignId)
      .flatMap((result) => result.participants)
  }

  // Filtered data
  const filteredCampaigns = mockEvaluation360.filter((campaign) => {
    if (selectedStatus !== 'all' && campaign.status !== selectedStatus) return false
    if (selectedDepartment !== 'all' && campaign.departmentId !== selectedDepartment) return false
    if (selectedEmployee !== 'all') {
      const participants = getCampaignParticipants(campaign.id)
      const hasEmployee = participants.some(
        (p) => p.evaluatedEmployeeId === selectedEmployee || p.evaluatorId === selectedEmployee,
      )
      if (!hasEmployee) return false
    }
    return true
  })

  const filteredEmployeesByDepartment = mockEmployees.filter(
    (emp) => selectedDepartment === 'all' || emp.departmantId === selectedDepartment,
  )

  // Statistics
  const totalActiveCampaigns = mockEvaluation360.filter(
    (c) => c.status === CampaignStatusEnum.Active,
  ).length

  const allParticipants = mockEvaluation360Results.flatMap((result) => result.participants)

  const totalCompletedEvaluations = allParticipants.filter(
    (p) => p.status === ParticipantStatusEnum.Completed,
  ).length

  const totalPendingEvaluations = allParticipants.filter(
    (p) => p.status === ParticipantStatusEnum.Invited || p.status === ParticipantStatusEnum.Started,
  ).length

  const totalParticipants = allParticipants.length

  // Results helper functions
  // Participant evaluation helper functions
  const handleViewEvaluationDetail = (result: {
    resultId: string
    evaluatedEmployeeName: string
    evaluatorName: string
    campaignName: string
    overallScore: number
    scorePercentage: number
    evaluatedEmployeeId: string
    evaluatorId: string
    campaignId: string
    evaluatorType: AssessorTypeEnum
    status: ParticipantStatusEnum
    completedDate?: Date
  }) => {
    // Değerlendirme detaylarını görüntüle
    console.log('Viewing evaluation detail:', result)
    setSelectedResult(result)
    setShowResultDetailModal(true)
  }

  const handleEditEvaluationDetail = (result: {
    resultId: string
    evaluatedEmployeeName: string
    evaluatorName: string
    campaignName: string
    overallScore: number
    scorePercentage: number
    evaluatedEmployeeId: string
    evaluatorId: string
    campaignId: string
    evaluatorType: AssessorTypeEnum
    status: ParticipantStatusEnum
    completedDate?: Date
  }) => {
    // Değerlendirme detaylarını düzenle
    console.log('Editing evaluation detail:', result)

    // Mevcut evaluation result'ını bul
    const evaluationResult = mockEvaluation360Results.find((r) => r.id === result.resultId)
    if (evaluationResult) {
      // Mevcut cevapları yükle
      const currentResponses: Record<string, string | number> = {}
      evaluationResult.participants.forEach((participant) => {
        participant.responses.forEach((response) => {
          currentResponses[response.questionId] = response.responseValue
        })
      })

      setEditResponses(currentResponses)
      setEditManagerComments(evaluationResult.managerComments || '')
      setEditHrComments(evaluationResult.hrComments || '')
      setEditResultStatus(evaluationResult.status)
    }

    setSelectedResult(result)
    setShowResultEditModal(true)
  }

  const getAssessorTypeLabel = (assessorType: AssessorTypeEnum): string => {
    return getAssessorTypeText(assessorType)
  }

  const getAllEvaluationParticipants = () => {
    // Tüm sonuçlardan participant verilerini al
    const allParticipants = mockEvaluation360Results.flatMap((result) =>
      result.participants.map((participant) => ({
        ...participant,
        resultId: result.id,
        evaluatedEmployeeName:
          mockEmployees.find((e) => e.id === participant.evaluatedEmployeeId)?.fullName ||
          'Bilinmiyor',
        evaluatorName:
          mockEmployees.find((e) => e.id === participant.evaluatorId)?.fullName || 'Bilinmiyor',
        campaignName:
          mockEvaluation360.find((c) => c.id === participant.campaignId)?.name || 'Bilinmiyor',
        overallScore: result.overallScore,
        scorePercentage: result.scorePercentage,
        result: result,
      })),
    )

    // Filtreleme işlemi
    return allParticipants.filter((participant) => {
      // Durum filtresi
      if (selectedResultsStatus !== 'all' && participant.status !== selectedResultsStatus) {
        return false
      }

      // Kampanya filtresi
      if (selectedResultsCampaign !== 'all' && participant.campaignId !== selectedResultsCampaign) {
        return false
      }

      // Değerlendirilecek kişi filtresi
      if (
        selectedResultsEmployee !== 'all' &&
        participant.evaluatedEmployeeId !== selectedResultsEmployee
      ) {
        return false
      }

      // Departman filtresi
      if (selectedResultsDepartment !== 'all') {
        const evaluatedEmployee = mockEmployees.find(
          (e) => e.id === participant.evaluatedEmployeeId,
        )
        if (!evaluatedEmployee || evaluatedEmployee.departmantId !== selectedResultsDepartment) {
          return false
        }
      }

      return true
    })
  }

  // Columns for campaigns table
  const campaignColumns: Column<HrEvaluation360>[] = [
    {
      key: 'name',
      header: 'Değerlendirme Adı',
      sortable: true,
    },
    {
      key: 'departmentId',
      header: 'Departman',
      render: (item: HrEvaluation360) => {
        const department = mockDepartments.find((d) => d.id === item.departmentId)
        return department?.name || 'Tüm Departmanlar'
      },
    },
    {
      key: 'templateId',
      header: 'Şablon',
      render: (item: HrEvaluation360) => {
        const template = mockEvaluation360Templates.find((t) => t.id === item.templateId)
        return template?.name || 'Bilinmiyor'
      },
    },
    {
      key: 'status',
      header: 'Durum',
      render: (item: HrEvaluation360) => (
        <span
          className={`px-2 py-1 text-xs font-medium rounded-full ${getCampaignStatusColor(
            item.status,
          )}`}
        >
          {getCampaignStatusText(item.status)}
        </span>
      ),
    },
    {
      key: 'startDate',
      header: 'Başlangıç',
      render: (item: HrEvaluation360) => item.startDate.toLocaleDateString('tr-TR'),
    },
    {
      key: 'endDate',
      header: 'Bitiş',
      render: (item: HrEvaluation360) => item.endDate.toLocaleDateString('tr-TR'),
    },
    {
      key: 'participants',
      header: 'Katılımcı',
      render: (item: HrEvaluation360) => {
        const participants = getCampaignParticipants(item.id)
        return `${participants.length} kişi`
      },
    },
    {
      key: 'id',
      header: 'İşlemler',
      render: (item: HrEvaluation360) => (
        <div className="flex gap-2">
          <button
            onClick={() => handleViewCampaign(item)}
            className="p-1 text-blue-600 hover:text-blue-800"
            title="Görüntüle"
          >
            <FaEye className="w-4 h-4" />
          </button>
          <button
            onClick={() => handleEditCampaign(item)}
            className="p-1 text-green-600 hover:text-green-800"
            title="Düzenle"
          >
            <FaEdit className="w-4 h-4" />
          </button>
        </div>
      ),
    },
  ]

  return (
    <Container>
      <div className="space-y-2">
        {/* Header */}
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-xl font-bold text-gray-900">360° Değerlendirme Sistemi</h1>
            <p className="text-gray-600 mt-1">Çok yönlü performans değerlendirme sistemi</p>
          </div>
        </div>

        {/* Statistics Cards */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-2">
          <Widget
            title="Aktif Değerlendirmeler"
            value={totalActiveCampaigns}
            color="blue"
            icon="FaPlay"
          />

          <Widget
            title="Tamamlanan Değerlendirmeler"
            value={totalCompletedEvaluations}
            color="green"
            icon="FaCheckCircle"
          />

          <Widget
            title="Bekleyen Değerlendirmeler"
            value={totalPendingEvaluations}
            color="yellow"
            icon="FaPoll"
          />

          <Widget title="Katılımcılar" value={totalParticipants} color="purple" icon="FaUsers" />
        </div>

        {/* Tabs */}
        <div className="bg-white rounded-lg shadow-sm border">
          <div className="border-b border-gray-200">
            <nav className="-mb-px flex space-x-2 px-2">
              {[
                {
                  key: 'campaigns',
                  label: 'Değerlendirme Kampanyaları',
                  icon: FaUsers,
                },
                {
                  key: 'results',
                  label: 'Değerlendirme Sonuçları',
                  icon: FaChartBar,
                },
              ].map(({ key, label, icon: Icon }) => (
                <button
                  key={key}
                  onClick={() => setActiveTab(key as 'campaigns' | 'results')}
                  className={`flex items-center gap-2 py-1.5 px-2.5 border-b-2 font-medium text-sm ${
                    activeTab === key
                      ? '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" />
                  {label}
                </button>
              ))}
            </nav>
          </div>

          <div className="p-3">
            {activeTab === 'campaigns' && (
              <div className="space-y-3">
                {/* Filters and Actions */}
                <div className="flex flex-col sm:flex-row gap-3 justify-between">
                  <div className="flex flex-col sm:flex-row gap-3">
                    <select
                      value={selectedStatus}
                      onChange={(e) => setSelectedStatus(e.target.value)}
                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
                    >
                      <option value="all">Tüm Durumlar</option>
                      <option value={CampaignStatusEnum.Draft}>Taslak</option>
                      <option value={CampaignStatusEnum.Active}>Aktif</option>
                      <option value={CampaignStatusEnum.Completed}>Tamamlandı</option>
                    </select>

                    <select
                      value={selectedDepartment}
                      onChange={(e) => setSelectedDepartment(e.target.value)}
                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
                    >
                      <option value="all">Tüm Departmanlar</option>
                      {mockDepartments.map((department) => (
                        <option key={department.id} value={department.id}>
                          {department.name}
                        </option>
                      ))}
                    </select>

                    <select
                      value={selectedEmployee}
                      onChange={(e) => setSelectedEmployee(e.target.value)}
                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
                    >
                      <option value="all">Tüm Personel</option>
                      {mockEmployees.map((employee) => (
                        <option key={employee.id} value={employee.id}>
                          {employee.firstName} {employee.lastName}
                        </option>
                      ))}
                    </select>
                  </div>

                  <div className="flex gap-2">
                    <button
                      onClick={handleNewCampaign}
                      className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm"
                    >
                      <FaPlus className="w-4 h-4" />
                      Yeni Değerlendirme
                    </button>
                    <button
                      onClick={handleStartEvaluation}
                      className="flex items-center gap-2 px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm"
                    >
                      <FaPoll className="w-4 h-4" />
                      Değerlendirme Yap
                    </button>
                  </div>
                </div>

                {/* Campaigns Table */}
                <DataTable data={filteredCampaigns} columns={campaignColumns} />
              </div>
            )}

            {activeTab === 'results' && (
              <div className="space-y-3">
                {/* Results Filters */}
                <div className="flex flex-col sm:flex-row gap-3 justify-between">
                  <div className="flex flex-col sm:flex-row gap-3">
                    <select
                      value={selectedResultsCampaign}
                      onChange={(e) => setSelectedResultsCampaign(e.target.value)}
                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
                    >
                      <option value="all">Tüm Değerlendirmeler</option>
                      {mockEvaluation360.map((campaign) => (
                        <option key={campaign.id} value={campaign.id}>
                          {campaign.name}
                        </option>
                      ))}
                    </select>

                    <select
                      value={selectedResultsStatus}
                      onChange={(e) => setSelectedResultsStatus(e.target.value)}
                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
                    >
                      <option value="all">Tüm Durumlar</option>
                      <option value={ParticipantStatusEnum.Invited}>Davet Edildi</option>
                      <option value={ParticipantStatusEnum.Started}>Başladı</option>
                      <option value={ParticipantStatusEnum.Completed}>Tamamlandı</option>
                      <option value={ParticipantStatusEnum.Expired}>Süresi Dolmuş</option>
                      <option value={ParticipantStatusEnum.Declined}>Reddedildi</option>
                    </select>

                    <select
                      value={selectedResultsDepartment}
                      onChange={(e) => setSelectedResultsDepartment(e.target.value)}
                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
                    >
                      <option value="all">Tüm Departmanlar</option>
                      {mockDepartments.map((department) => (
                        <option key={department.id} value={department.id}>
                          {department.name}
                        </option>
                      ))}
                    </select>

                    <select
                      value={selectedResultsEmployee}
                      onChange={(e) => setSelectedResultsEmployee(e.target.value)}
                      className="border border-gray-300 rounded-md px-2.5 py-1 text-sm"
                    >
                      <option value="all">Tüm Personel</option>
                      {mockEmployees.map((employee) => (
                        <option key={employee.id} value={employee.id}>
                          {employee.firstName} {employee.lastName}
                        </option>
                      ))}
                    </select>
                  </div>
                </div>

                {/* Results Summary */}

                <div className="bg-white rounded-lg border overflow-hidden">
                  <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Değerlendirme Adı
                          </th>
                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Değerlendirilecek Kişi
                          </th>
                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Değerlendiren
                          </th>
                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Toplam İlerleme
                          </th>
                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Değerlendirme Durumu
                          </th>
                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Toplam Puan
                          </th>
                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Puan Yüzdesi
                          </th>
                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            İşlemler
                          </th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {getAllEvaluationParticipants().map((result) => (
                          <tr
                            key={`${result.resultId}-${result.evaluatedEmployeeId}-${result.evaluatorId}`}
                            className="hover:bg-gray-50 text-xs"
                          >
                            <td className="px-3 py-2 whitespace-nowrap text-gray-500">
                              <div className="flex flex-col">
                                <span className="font-medium text-gray-900">
                                  {result.campaignName}
                                </span>
                                <span className="text-xs text-gray-500">
                                  {result.completedDate
                                    ? new Date(result.completedDate).toLocaleDateString('tr-TR')
                                    : '-'}
                                </span>
                              </div>
                            </td>
                            <td className="px-3 py-2 whitespace-nowrap text-gray-500">
                              {result.evaluatedEmployeeName}
                            </td>
                            <td className="px-3 py-2 whitespace-nowrap text-gray-500">
                              <div className="flex flex-col">
                                <span className="font-medium text-gray-900">
                                  {result.evaluatorName}
                                </span>
                                <span className="text-xs text-gray-500">
                                  {getAssessorTypeLabel(result.evaluatorType)}
                                </span>
                              </div>
                            </td>
                            <td className="px-3 py-2 whitespace-nowrap text-sm">
                              <div className="flex items-center">
                                <div className="w-16 bg-gray-200 rounded-full h-2 mr-2">
                                  <div
                                    className="bg-blue-600 h-2 rounded-full"
                                    style={{
                                      width: `${
                                        result.status === ParticipantStatusEnum.Completed ? 100 : 50
                                      }%`,
                                    }}
                                  ></div>
                                </div>
                                <span className="text-sm text-gray-600">
                                  {result.status === ParticipantStatusEnum.Completed ? 100 : 50}%
                                </span>
                              </div>
                            </td>
                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
                              <span
                                className={`inline-block px-2 py-1 text-xs rounded-full ${getParticipantStatusColor(
                                  result.status,
                                )}`}
                              >
                                {getParticipantStatusText(result.status)}
                              </span>
                            </td>
                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
                              {result.overallScore}/100
                            </td>
                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
                              %{result.scorePercentage}
                            </td>
                            <td className="px-3 py-2 whitespace-nowrap text-sm font-medium">
                              <div className="flex gap-2">
                                <button
                                  onClick={() => handleViewEvaluationDetail(result)}
                                  className="text-blue-600 hover:text-blue-900"
                                  title="Değerlendirme Detayını Görüntüle"
                                >
                                  <FaEye className="w-4 h-4" />
                                </button>
                                <button
                                  onClick={() => handleEditEvaluationDetail(result)}
                                  className="text-green-600 hover:text-green-900"
                                  title="Değerlendirme Detayını Düzenle"
                                >
                                  <FaEdit className="w-4 h-4" />
                                </button>
                              </div>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Campaign Modal */}
      {showCampaignModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2">
          <div className="bg-white rounded-lg w-full max-w-lg max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center p-2.5 border-b">
              <h2 className="text-base font-semibold">
                {selectedCampaign ? 'Değerlendirme Düzenle' : 'Yeni Değerlendirme'}
              </h2>
              <button
                onClick={handleCloseModal}
                className="p-1.5 text-gray-400 hover:text-gray-600"
              >
                <FaTimes className="w-4 h-4" />
              </button>
            </div>
            <div className="p-3 space-y-2.5">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Değerlendirme Adı
                </label>
                <input
                  type="text"
                  value={campaignFormData.name}
                  onChange={(e) =>
                    setCampaignFormData({
                      ...campaignFormData,
                      name: e.target.value,
                    })
                  }
                  className="w-full border border-gray-300 rounded-md px-2 py-1 text-sm"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Açıklama</label>
                <textarea
                  value={campaignFormData.description}
                  onChange={(e) =>
                    setCampaignFormData({
                      ...campaignFormData,
                      description: e.target.value,
                    })
                  }
                  rows={1}
                  className="w-full border border-gray-300 rounded-md px-2 py-1 text-sm"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Değerlendirme Şablonu
                </label>
                <select
                  value={campaignFormData.templateId}
                  onChange={(e) =>
                    setCampaignFormData({
                      ...campaignFormData,
                      templateId: e.target.value,
                    })
                  }
                  className="w-full border border-gray-300 rounded-md px-2 py-1 text-sm"
                >
                  <option value="">Şablon Seçin</option>
                  {mockEvaluation360Templates.map((template) => (
                    <option key={template.id} value={template.id}>
                      {template.name}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Departman</label>
                <select
                  value={campaignFormData.departmentId}
                  onChange={(e) => handleDepartmentChange(e.target.value)}
                  className="w-full border border-gray-300 rounded-md px-2 py-1 text-sm"
                >
                  <option value="">Departman Seçin</option>
                  {mockDepartments.map((department) => (
                    <option key={department.id} value={department.id}>
                      {department.name}
                    </option>
                  ))}
                </select>
              </div>

              {campaignFormData.departmentId && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Hedef Personel
                  </label>
                  <div className="border border-gray-300 rounded-md p-1.5 max-h-28 overflow-y-auto">
                    {filteredEmployeesByDepartment.map((employee) => (
                      <label key={employee.id} className="flex items-center mb-2">
                        <input
                          type="checkbox"
                          checked={campaignFormData.targetEmployees.includes(employee.id)}
                          onChange={(e) => {
                            if (e.target.checked) {
                              setCampaignFormData({
                                ...campaignFormData,
                                targetEmployees: [...campaignFormData.targetEmployees, employee.id],
                              })
                            } else {
                              setCampaignFormData({
                                ...campaignFormData,
                                targetEmployees: campaignFormData.targetEmployees.filter(
                                  (id) => id !== employee.id,
                                ),
                              })
                            }
                          }}
                          className="mr-2"
                        />
                        {employee.firstName} {employee.lastName} -{' '}
                        {employee.jobPosition?.name || 'Pozisyon Belirtilmemiş'}
                      </label>
                    ))}
                  </div>
                </div>
              )}

              <div className="grid grid-cols-2 gap-2.5">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Başlangıç Tarihi
                  </label>
                  <input
                    type="date"
                    value={campaignFormData.startDate}
                    onChange={(e) =>
                      setCampaignFormData({
                        ...campaignFormData,
                        startDate: e.target.value,
                      })
                    }
                    className="w-full border border-gray-300 rounded-md px-2 py-1 text-sm"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Bitiş Tarihi
                  </label>
                  <input
                    type="date"
                    value={campaignFormData.endDate}
                    onChange={(e) =>
                      setCampaignFormData({
                        ...campaignFormData,
                        endDate: e.target.value,
                      })
                    }
                    className="w-full border border-gray-300 rounded-md px-2 py-1 text-sm"
                  />
                </div>
              </div>
            </div>
            <div className="flex justify-end gap-2 p-2.5 border-t">
              <button
                onClick={handleCloseModal}
                className="px-2.5 py-1 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
              >
                İptal
              </button>
              <button
                onClick={handleSaveCampaign}
                className="flex items-center gap-2 px-2.5 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
              >
                <FaSave className="w-4 h-4" />
                {selectedCampaign ? 'Güncelle' : 'Kaydet'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* View Modal */}
      {showViewModal && selectedCampaign && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2">
          <div className="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center p-2.5 border-b">
              <h2 className="text-base font-semibold">{selectedCampaign.name}</h2>
              <button
                onClick={handleCloseModal}
                className="p-1.5 text-gray-400 hover:text-gray-600"
              >
                <FaTimes className="w-4 h-4" />
              </button>
            </div>
            <div className="p-3 space-y-3">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h3 className="text-sm font-medium text-gray-900 mb-2">
                    Değerlendirme Bilgileri
                  </h3>
                  <div className="space-y-2">
                    <div>
                      <span className="text-sm font-medium text-gray-600">Adı:</span>
                      <p className="text-sm text-gray-900">{selectedCampaign.name}</p>
                    </div>
                    <div>
                      <span className="text-sm font-medium text-gray-600">Açıklama:</span>
                      <p className="text-sm text-gray-900">{selectedCampaign.description}</p>
                    </div>
                    <div>
                      <span className="text-sm font-medium text-gray-600">Durum:</span>
                      <span
                        className={`ml-2 px-3 py-1 text-xs font-medium rounded-full ${getCampaignStatusColor(
                          selectedCampaign.status,
                        )}`}
                      >
                        {getCampaignStatusText(selectedCampaign.status)}
                      </span>
                    </div>
                    <div>
                      <span className="text-sm font-medium text-gray-600">Tarih Aralığı:</span>
                      <p className="text-sm text-gray-900">
                        {selectedCampaign.startDate.toLocaleDateString('tr-TR')} -{' '}
                        {selectedCampaign.endDate.toLocaleDateString('tr-TR')}
                      </p>
                    </div>
                  </div>
                </div>

                <div>
                  <h3 className="text-sm font-medium text-gray-900 mb-2">
                    Katılımcı İstatistikleri
                  </h3>
                  <div className="space-y-2">
                    {(() => {
                      const participants = getCampaignParticipants(selectedCampaign.id)
                      const completed = participants.filter(
                        (p) => p.status === ParticipantStatusEnum.Completed,
                      )
                      const started = participants.filter(
                        (p) => p.status === ParticipantStatusEnum.Started,
                      )
                      const invited = participants.filter(
                        (p) => p.status === ParticipantStatusEnum.Invited,
                      )

                      return (
                        <>
                          <div className="flex justify-between">
                            <span className="text-sm text-gray-600">Toplam:</span>
                            <span className="text-sm font-medium text-gray-900">
                              {participants.length}
                            </span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-sm text-gray-600">Tamamlanan:</span>
                            <span className="text-sm font-medium text-green-600">
                              {completed.length}
                            </span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-sm text-gray-600">Devam Eden:</span>
                            <span className="text-sm font-medium text-blue-600">
                              {started.length}
                            </span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-sm text-gray-600">Bekleyen:</span>
                            <span className="text-sm font-medium text-yellow-600">
                              {invited.length}
                            </span>
                          </div>
                        </>
                      )
                    })()}
                  </div>
                </div>
              </div>

              <div>
                <h3 className="text-sm font-medium text-gray-900 mb-2">Katılımcı Detayları</h3>
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Hedef Çalışan
                        </th>
                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Değerlendiren
                        </th>
                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Tip
                        </th>
                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Durum
                        </th>
                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Tarih
                        </th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {getCampaignParticipants(selectedCampaign.id).map((participant) => {
                        const targetEmployee = mockEmployees.find(
                          (emp) => emp.id === participant.evaluatedEmployeeId,
                        )
                        const assessorEmployee = mockEmployees.find(
                          (emp) => emp.id === participant.evaluatorId,
                        )

                        return (
                          <tr key={participant.id}>
                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
                              {targetEmployee
                                ? `${targetEmployee.firstName} ${targetEmployee.lastName}`
                                : 'Bilinmiyor'}
                            </td>
                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
                              {assessorEmployee
                                ? `${assessorEmployee.firstName} ${assessorEmployee.lastName}`
                                : 'Bilinmiyor'}
                            </td>
                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-500">
                              {getAssessorTypeText(participant.evaluatorType)}
                            </td>
                            <td className="px-3 py-2 whitespace-nowrap">
                              <span
                                className={`px-2 py-1 text-xs font-medium rounded-full ${getParticipantStatusColor(
                                  participant.status,
                                )}`}
                              >
                                {getParticipantStatusText(participant.status)}
                              </span>
                            </td>
                            <td className="px-3 py-2 whitespace-nowrap text-sm text-gray-500">
                              {participant.completedDate
                                ? participant.completedDate.toLocaleDateString('tr-TR')
                                : participant.startedDate
                                  ? `Başladı: ${participant.startedDate.toLocaleDateString(
                                      'tr-TR',
                                    )}`
                                  : `Davet: ${participant.invitedDate.toLocaleDateString('tr-TR')}`}
                            </td>
                          </tr>
                        )
                      })}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div className="flex justify-end gap-2 p-2.5 border-t">
              <button
                onClick={handleCloseModal}
                className="px-2.5 py-1 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
              >
                Kapat
              </button>
              <button
                onClick={() => {
                  handleCloseModal()
                  handleEditCampaign(selectedCampaign)
                }}
                className="flex items-center gap-2 px-2.5 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
              >
                <FaEdit className="w-4 h-4" />
                Düzenle
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Evaluation Modal */}
      {showEvaluationModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2">
          <div className="bg-white rounded-lg w-full max-w-lg max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center p-2.5 border-b">
              <h2 className="text-base font-semibold">
                {!currentCampaignForEvaluation
                  ? 'Değerlendirme Yap'
                  : currentCampaignForEvaluation.name}
              </h2>
              <button
                onClick={handleCloseModal}
                className="p-1.5 text-gray-400 hover:text-gray-600"
              >
                <FaTimes className="w-4 h-4" />
              </button>
            </div>
            <div className="p-3 space-y-2.5">
              {!currentCampaignForEvaluation ? (
                /* Adım 0: Değerlendirme seçimi */
                <div>
                  <h3 className="text-sm font-medium text-gray-900 mb-2">Değerlendirme Seçin</h3>
                  <div className="space-y-2">
                    {mockEvaluation360
                      .filter((campaign) => campaign.status === CampaignStatusEnum.Active)
                      .map((campaign) => (
                        <div
                          key={campaign.id}
                          className="border rounded-lg p-2.5 hover:bg-gray-50 cursor-pointer"
                          onClick={() => setCurrentCampaignForEvaluation(campaign)}
                        >
                          <div className="flex justify-between items-center">
                            <div>
                              <h4 className="font-medium text-gray-900">{campaign.name}</h4>
                              <p className="text-sm text-gray-600">{campaign.description}</p>
                              <div className="flex items-center gap-2 mt-2">
                                <span
                                  className={`inline-block px-2 py-1 text-xs rounded-full ${getCampaignStatusColor(
                                    campaign.status,
                                  )}`}
                                >
                                  {getCampaignStatusText(campaign.status)}
                                </span>
                                <span className="text-xs text-gray-500">
                                  {campaign.startDate.toLocaleDateString()} -{' '}
                                  {campaign.endDate.toLocaleDateString()}
                                </span>
                              </div>
                            </div>
                            <FaPlay className="w-4 h-4 text-gray-400" />
                          </div>
                        </div>
                      ))}
                  </div>
                  {mockEvaluation360.filter(
                    (campaign) => campaign.status === CampaignStatusEnum.Active,
                  ).length === 0 && (
                    <div className="text-center py-8 text-gray-500">
                      <FaPoll className="w-12 h-12 mx-auto mb-3 text-gray-300" />
                      <p>Aktif değerlendirme bulunmuyor</p>
                    </div>
                  )}
                </div>
              ) : !evaluationTarget ? (
                /* Adım 1: Değerlendirilecek kişi seçimi */
                <div>
                  <div className="mb-4">
                    <button
                      onClick={() => setCurrentCampaignForEvaluation(null)}
                      className="text-blue-600 hover:text-blue-800 text-sm"
                    >
                      ← Değerlendirme Seçimine Dön
                    </button>
                  </div>
                  <h3 className="text-sm font-medium text-gray-900 mb-2">
                    1. Adım: Değerlendirilecek Kişiyi Seçin
                  </h3>
                  <div className="bg-blue-50 p-2.5 rounded-lg mb-3">
                    <p className="text-sm text-blue-800">
                      <strong>Seçili Değerlendirme:</strong> {currentCampaignForEvaluation.name}
                    </p>
                  </div>
                  <div className="space-y-3">
                    {mockEmployees
                      .filter((emp) =>
                        currentCampaignForEvaluation.targetEmployees.includes(emp.id),
                      )
                      .map((employee) => (
                        <div
                          key={employee.id}
                          className="border rounded-lg p-2.5 hover:bg-gray-50 cursor-pointer"
                          onClick={() => setEvaluationTarget(employee.id)}
                        >
                          <div className="flex justify-between items-center">
                            <div>
                              <h4 className="font-medium text-gray-900">{employee.fullName}</h4>
                              <p className="text-sm text-gray-600">{employee.jobPosition?.name}</p>
                              <p className="text-sm text-gray-600">
                                {mockDepartments.find((d) => d.id === employee.departmantId)?.name}
                              </p>
                            </div>
                            <FaUsers className="w-4 h-4 text-gray-400" />
                          </div>
                        </div>
                      ))}
                  </div>
                  {mockEmployees.filter((emp) =>
                    currentCampaignForEvaluation.targetEmployees.includes(emp.id),
                  ).length === 0 && (
                    <div className="text-center py-8 text-gray-500">
                      <FaUsers className="w-12 h-12 mx-auto mb-3 text-gray-300" />
                      <p>Bu değerlendirmede hedef çalışan bulunmuyor</p>
                    </div>
                  )}
                </div>
              ) : !selectedAssessorType ? (
                /* Adım 2a: Değerlendirici Tipi Seçimi */
                <div>
                  <div className="mb-4">
                    <button
                      onClick={() => setEvaluationTarget('')}
                      className="text-blue-600 hover:text-blue-800 text-sm"
                    >
                      ← Geri Dön
                    </button>
                  </div>
                  <h3 className="text-sm font-medium text-gray-900 mb-2">
                    2. Adım: Değerlendirici Tipi Seçin
                  </h3>
                  <div className="bg-blue-50 p-2.5 rounded-lg mb-3">
                    <p className="text-sm text-blue-800">
                      <strong>Değerlendirilecek:</strong>{' '}
                      {mockEmployees.find((e) => e.id === evaluationTarget)?.fullName}
                    </p>
                  </div>

                  {/* Değerlendirici tipi seçimi */}
                  <div className="space-y-2">
                    {getAllowedAssessorTypes().map((assessorType) => (
                      <div
                        key={assessorType}
                        className="border rounded-lg p-2.5 hover:bg-gray-50 cursor-pointer"
                        onClick={() => {
                          setSelectedAssessorType(assessorType)
                          setEvaluatorSearchTerm('')
                        }}
                      >
                        <div className="flex justify-between items-center">
                          <div>
                            <h4 className="font-medium text-gray-900">
                              {getAssessorTypeText(assessorType)}
                            </h4>
                            <p className="text-sm text-gray-600">
                              {getAssessorTypeDescription(assessorType)}
                            </p>
                            {getEvaluatorsByType(evaluationTarget, assessorType).length > 0 && (
                              <span className="inline-block mt-1 px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">
                                {getEvaluatorsByType(evaluationTarget, assessorType).length} seçenek
                                mevcut
                              </span>
                            )}
                          </div>
                          <FaUsers className="w-4 h-4 text-gray-400" />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ) : !evaluationEvaluator ? (
                /* Adım 2b: Belirli tip değerlendirici seçimi */
                <div>
                  <div className="mb-4">
                    <button
                      onClick={() => {
                        setSelectedAssessorType(null)
                        setEvaluationEvaluator('')
                        setSelectedCustomerId('')
                        setExternalEvaluatorName('')
                        setExternalEvaluatorEmail('')
                        setEvaluatorSearchTerm('')
                      }}
                      className="text-blue-600 hover:text-blue-800 text-sm"
                    >
                      ← Geri Dön
                    </button>
                  </div>
                  <h3 className="text-sm font-medium text-gray-900 mb-2">
                    2. Adım: {getAssessorTypeText(selectedAssessorType)} Seçin
                  </h3>
                  <div className="bg-blue-50 p-2.5 rounded-lg mb-3">
                    <p className="text-sm text-blue-800">
                      <strong>Değerlendirilecek:</strong>{' '}
                      {mockEmployees.find((e) => e.id === evaluationTarget)?.fullName}
                      <br />
                      <strong>Değerlendirici Tipi:</strong>{' '}
                      {getAssessorTypeText(selectedAssessorType)}
                    </p>
                  </div>

                  {selectedAssessorType === AssessorTypeEnum.External ? (
                    /* Dış değerlendirici için form */
                    <div className="space-y-3">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          Değerlendirici Adı *
                        </label>
                        <input
                          type="text"
                          value={externalEvaluatorName}
                          onChange={(e) => setExternalEvaluatorName(e.target.value)}
                          className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                          placeholder="Değerlendirici adını girin"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          E-posta Adresi *
                        </label>
                        <input
                          type="email"
                          value={externalEvaluatorEmail}
                          onChange={(e) => setExternalEvaluatorEmail(e.target.value)}
                          className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                          placeholder="E-posta adresini girin"
                        />
                      </div>
                      {externalEvaluatorName && externalEvaluatorEmail && (
                        <button
                          onClick={() => setEvaluationEvaluator('external')}
                          className="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 text-sm"
                        >
                          Dış Değerlendiriciyi Seç
                        </button>
                      )}
                    </div>
                  ) : selectedAssessorType === AssessorTypeEnum.Customer ? (
                    /* Müşteri seçimi */
                    <div className="space-y-2">
                      {/* Arama kutusu */}
                      <div>
                        <input
                          type="text"
                          value={evaluatorSearchTerm}
                          onChange={(e) => setEvaluatorSearchTerm(e.target.value)}
                          className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                          placeholder="Müşteri adında ara..."
                        />
                      </div>
                      {getEvaluatorsByType(evaluationTarget, selectedAssessorType)
                        .filter((evaluator) =>
                          evaluator.name.toLowerCase().includes(evaluatorSearchTerm.toLowerCase()),
                        )
                        .map((evaluator) => (
                          <div
                            key={evaluator.id}
                            className="border rounded-lg p-2.5 hover:bg-gray-50 cursor-pointer"
                            onClick={() => {
                              setSelectedCustomerId(evaluator.id)
                              setEvaluationEvaluator(evaluator.id)
                            }}
                          >
                            <div className="flex justify-between items-center">
                              <div>
                                <h4 className="font-medium text-gray-900">{evaluator.name}</h4>
                                <p className="text-sm text-gray-600">{evaluator.title}</p>
                                <span className="inline-block mt-1 px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">
                                  {evaluator.department}
                                </span>
                              </div>
                              <FaUsers className="w-4 h-4 text-gray-400" />
                            </div>
                          </div>
                        ))}
                    </div>
                  ) : (
                    /* Diğer tipler için çalışan seçimi */
                    <div className="space-y-2">
                      {/* Arama kutusu */}
                      <div>
                        <input
                          type="text"
                          value={evaluatorSearchTerm}
                          onChange={(e) => setEvaluatorSearchTerm(e.target.value)}
                          className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                          placeholder="Çalışan adında ara..."
                        />
                      </div>
                      {getEvaluatorsByType(evaluationTarget, selectedAssessorType)
                        .filter((evaluator) =>
                          evaluator.name.toLowerCase().includes(evaluatorSearchTerm.toLowerCase()),
                        )
                        .map((evaluator) => (
                          <div
                            key={evaluator.id}
                            className="border rounded-lg p-2.5 hover:bg-gray-50 cursor-pointer"
                            onClick={() => setEvaluationEvaluator(evaluator.id)}
                          >
                            <div className="flex justify-between items-center">
                              <div>
                                <h4 className="font-medium text-gray-900">{evaluator.name}</h4>
                                <p className="text-sm text-gray-600">{evaluator.title}</p>
                                <span className="inline-block mt-1 px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">
                                  {evaluator.department}
                                </span>
                              </div>
                              <FaUsers className="w-4 h-4 text-gray-400" />
                            </div>
                          </div>
                        ))}
                      {getEvaluatorsByType(evaluationTarget, selectedAssessorType).length === 0 && (
                        <div className="text-center py-8 text-gray-500">
                          <FaUsers className="w-12 h-12 mx-auto mb-3 text-gray-300" />
                          <p>Bu kategoride değerlendirici bulunmuyor</p>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              ) : (
                /* Adım 3: Değerlendirme formu */
                <div>
                  <div className="mb-4">
                    <button
                      onClick={() => {
                        setSelectedAssessorType(null)
                        setEvaluationEvaluator('')
                        setSelectedCustomerId('')
                        setExternalEvaluatorName('')
                        setExternalEvaluatorEmail('')
                        setEvaluatorSearchTerm('')
                      }}
                      className="text-blue-600 hover:text-blue-800 text-sm"
                    >
                      ← Geri Dön
                    </button>
                  </div>
                  <h3 className="text-sm font-medium text-gray-900 mb-2">
                    3. Adım: Değerlendirme Formu
                  </h3>
                  <div className="bg-green-50 p-2.5 rounded-lg mb-3">
                    <p className="text-sm text-green-800">
                      <strong>Değerlendirilen:</strong>{' '}
                      {mockEmployees.find((e) => e.id === evaluationTarget)?.fullName}
                      <br />
                      <strong>Değerlendiren:</strong> {getEvaluatorInfo()}
                    </p>
                  </div>

                  {/* Burada şablonun sorularını göstereceğiz */}
                  <div className="space-y-3">
                    {currentCampaignForEvaluation &&
                      mockEvaluation360Templates
                        .find((t) => t.id === currentCampaignForEvaluation.templateId)
                        ?.questionGroups.map((group) => (
                          <div key={group.id} className="border rounded-lg p-2.5">
                            <h4 className="font-medium text-gray-900 mb-2">{group.groupName}</h4>
                            <p className="text-sm text-gray-600 mb-3">{group.description}</p>
                            <div className="space-y-3">
                              {group.questions.map((question, qIndex) => (
                                <div key={question.id} className="bg-gray-50 p-2.5 rounded">
                                  <p className="font-medium text-gray-800 mb-3">
                                    {qIndex + 1}. {question.questionText}
                                    {question.isRequired && (
                                      <span className="text-red-500 ml-1">*</span>
                                    )}
                                  </p>

                                  {/* Soru tipine göre input alanları */}
                                  {question.questionType === QuestionTypeEnum.Rating && (
                                    <div className="space-y-2">
                                      <div className="flex justify-around items-center">
                                        {Array.from(
                                          {
                                            length:
                                              (question.maxRating || 5) -
                                              (question.minRating || 1) +
                                              1,
                                          },
                                          (_, i) => {
                                            const value = (question.minRating || 1) + i
                                            return (
                                              <label
                                                key={value}
                                                className="flex flex-col items-center cursor-pointer"
                                              >
                                                <input
                                                  type="radio"
                                                  name={`question-${question.id}`}
                                                  value={value}
                                                  checked={
                                                    evaluationResponses[question.id] === value
                                                  }
                                                  onChange={(e) =>
                                                    handleResponseChange(
                                                      question.id,
                                                      Number(e.target.value),
                                                    )
                                                  }
                                                  className="mb-1"
                                                />
                                                <span className="text-xs text-gray-600">
                                                  {question.ratingLabels?.[i] || value}
                                                </span>
                                              </label>
                                            )
                                          },
                                        )}
                                      </div>
                                    </div>
                                  )}

                                  {question.questionType === QuestionTypeEnum.Text && (
                                    <textarea
                                      className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                                      rows={3}
                                      placeholder="Yorumunuzu yazın..."
                                      value={evaluationResponses[question.id] || ''}
                                      onChange={(e) =>
                                        handleResponseChange(question.id, e.target.value)
                                      }
                                    />
                                  )}

                                  {question.questionType === QuestionTypeEnum.YesNo && (
                                    <div className="flex gap-4">
                                      <label className="flex items-center cursor-pointer">
                                        <input
                                          type="radio"
                                          name={`question-${question.id}`}
                                          value="yes"
                                          checked={evaluationResponses[question.id] === 'yes'}
                                          onChange={(e) =>
                                            handleResponseChange(question.id, e.target.value)
                                          }
                                          className="mr-2"
                                        />
                                        Evet
                                      </label>
                                      <label className="flex items-center cursor-pointer">
                                        <input
                                          type="radio"
                                          name={`question-${question.id}`}
                                          value="no"
                                          checked={evaluationResponses[question.id] === 'no'}
                                          onChange={(e) =>
                                            handleResponseChange(question.id, e.target.value)
                                          }
                                          className="mr-2"
                                        />
                                        Hayır
                                      </label>
                                    </div>
                                  )}

                                  {question.questionType === QuestionTypeEnum.MultipleChoice && (
                                    <div className="space-y-2">
                                      {question.options?.map((option) => (
                                        <label
                                          key={option.id}
                                          className="flex items-center cursor-pointer"
                                        >
                                          <input
                                            type="radio"
                                            name={`question-${question.id}`}
                                            value={option.value}
                                            checked={
                                              evaluationResponses[question.id] === option.value
                                            }
                                            onChange={(e) =>
                                              handleResponseChange(
                                                question.id,
                                                Number(e.target.value),
                                              )
                                            }
                                            className="mr-2"
                                          />
                                          {option.optionText}
                                        </label>
                                      ))}
                                    </div>
                                  )}
                                </div>
                              ))}
                            </div>
                          </div>
                        ))}
                  </div>
                </div>
              )}
            </div>
            <div className="flex justify-end gap-2 p-2.5 border-t">
              <button
                onClick={handleCloseModal}
                className="px-2.5 py-1 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
              >
                İptal
              </button>
              {evaluationTarget && evaluationEvaluator && (
                <button
                  onClick={handleSaveEvaluation}
                  className="flex items-center gap-2 px-2.5 py-1 text-sm bg-green-600 text-white rounded-md hover:bg-green-700"
                >
                  <FaSave className="w-4 h-4" />
                  Değerlendirmeyi Kaydet
                </button>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Result Detail Modal */}
      {showResultDetailModal && selectedResult && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2">
          <div className="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center p-2.5 border-b">
              <h2 className="text-base font-semibold">Değerlendirme Detayı</h2>
              <button
                onClick={handleCloseModal}
                className="p-1.5 text-gray-400 hover:text-gray-600"
              >
                <FaTimes className="w-4 h-4" />
              </button>
            </div>
            <div className="p-3 space-y-2.5">
              {/* Genel Bilgiler */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h3 className="font-medium text-blue-800 mb-2 text-sm">
                    Değerlendirme Bilgileri
                  </h3>
                  <div className="space-y-1.5">
                    <div>
                      <span className="text-sm text-blue-700 font-medium">Kampanya: </span>
                      <span className="text-sm text-blue-800">{selectedResult.campaignName}</span>
                    </div>
                    <div>
                      <span className="text-sm text-blue-700 font-medium">Değerlendirilen: </span>
                      <span className="text-sm text-blue-800">
                        {selectedResult.evaluatedEmployeeName}
                      </span>
                    </div>
                    <div>
                      <span className="text-sm text-blue-700 font-medium">Değerlendiren: </span>
                      <span className="text-sm text-blue-800">{selectedResult.evaluatorName}</span>
                    </div>
                    <div>
                      <span className="text-sm text-blue-700 font-medium">
                        Değerlendiren Tipi:{' '}
                      </span>
                      <span className="text-sm text-blue-800">
                        {getAssessorTypeText(selectedResult.evaluatorType)}
                      </span>
                    </div>
                  </div>
                </div>

                <div className="bg-green-50 p-4 rounded-lg">
                  <h3 className="font-medium text-green-800 mb-2 text-sm">Sonuç Bilgileri</h3>
                  <div className="space-y-1.5">
                    <div>
                      <span className="text-sm text-green-700 font-medium">Durum: </span>
                      <span
                        className={`text-sm px-2 py-0.5 rounded-full ${getParticipantStatusColor(
                          selectedResult.status,
                        )}`}
                      >
                        {getParticipantStatusText(selectedResult.status)}
                      </span>
                    </div>
                    <div>
                      <span className="text-sm text-green-700 font-medium">Toplam Puan: </span>
                      <span className="text-sm text-green-800 font-bold">
                        {selectedResult.overallScore}/100
                      </span>
                    </div>
                    <div>
                      <span className="text-sm text-green-700 font-medium">Yüzde: </span>
                      <span className="text-sm text-green-800 font-bold">
                        %{selectedResult.scorePercentage}
                      </span>
                    </div>
                    {selectedResult.completedDate && (
                      <div>
                        <span className="text-sm text-green-700 font-medium">
                          Tamamlanma Tarihi:{' '}
                        </span>
                        <span className="text-sm text-green-800">
                          {new Date(selectedResult.completedDate).toLocaleDateString('tr-TR')}
                        </span>
                      </div>
                    )}
                  </div>
                </div>
              </div>

              {/* Detaylı Sonuçlar */}
              <div className="border rounded-lg p-3">
                <h3 className="font-medium text-gray-900 mb-2 text-sm">Detaylı Sonuçlar</h3>

                {(() => {
                  // Seçili sonucu mockEvaluation360Results'tan bul
                  const evaluationResult = mockEvaluation360Results.find(
                    (r) => r.id === selectedResult.resultId,
                  )
                  if (!evaluationResult) {
                    return (
                      <div className="text-center py-8 text-gray-500">
                        <FaChartBar className="w-12 h-12 mx-auto mb-3 text-gray-300" />
                        <p>Sonuç verisi bulunamadı</p>
                      </div>
                    )
                  }

                  return (
                    <div className="space-y-2.5">
                      {/* Soru Cevapları */}
                      {(() => {
                        const campaign = mockEvaluation360.find(
                          (c) => c.id === selectedResult.campaignId,
                        )
                        const template = campaign
                          ? mockEvaluation360Templates.find((t) => t.id === campaign.templateId)
                          : null

                        if (template) {
                          return (
                            <div>
                              <h4 className="font-medium text-gray-800 mb-2 text-sm">
                                📝 Soru Cevapları
                              </h4>
                              <div className="space-y-3">
                                {template.questionGroups.map((group) => (
                                  <div key={group.id} className="bg-gray-50 p-2.5 rounded-lg">
                                    <div className="mb-3">
                                      <h5 className="font-medium text-gray-800">
                                        {group.groupName}
                                      </h5>
                                      <p className="text-sm text-gray-600">{group.description}</p>
                                    </div>

                                    <div className="space-y-2.5">
                                      {group.questions.map((question, qIndex) => {
                                        const response = evaluationResult.participants
                                          .flatMap((p) => p.responses)
                                          .find((r) => r.questionId === question.id)

                                        if (!response) return null

                                        return (
                                          <div
                                            key={question.id}
                                            className="bg-white p-1.5 rounded border-l-4 border-blue-200"
                                          >
                                            <div className="mb-2">
                                              <span className="text-sm font-medium text-gray-800">
                                                S{qIndex + 1}: {question.questionText}
                                              </span>
                                            </div>

                                            <div className="flex items-center justify-between">
                                              <div className="flex items-center gap-3">
                                                <span className="text-sm text-gray-600">
                                                  Cevap:
                                                </span>
                                                <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm font-medium">
                                                  {(() => {
                                                    if (
                                                      question.questionType ===
                                                      QuestionTypeEnum.Rating
                                                    ) {
                                                      const ratingIndex =
                                                        Number(response.responseValue) -
                                                        (question.minRating || 1)
                                                      const label =
                                                        question.ratingLabels?.[ratingIndex]
                                                      return label
                                                        ? `${response.responseValue} - ${label}`
                                                        : response.responseValue
                                                    } else if (
                                                      question.questionType ===
                                                      QuestionTypeEnum.YesNo
                                                    ) {
                                                      return response.responseValue === 'yes'
                                                        ? 'Evet'
                                                        : 'Hayır'
                                                    } else if (
                                                      question.questionType ===
                                                      QuestionTypeEnum.MultipleChoice
                                                    ) {
                                                      const option = question.options?.find(
                                                        (o) =>
                                                          o.value ===
                                                          Number(response.responseValue),
                                                      )
                                                      return option
                                                        ? option.optionText
                                                        : response.responseValue
                                                    } else {
                                                      return response.responseValue
                                                    }
                                                  })()}
                                                </span>
                                              </div>

                                              <div className="flex items-center gap-2">
                                                <span className="text-xs text-gray-500">Puan:</span>
                                                <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-sm font-bold">
                                                  {response.score}
                                                </span>
                                              </div>
                                            </div>

                                            {response.responseText && (
                                              <div className="mt-2 p-2 bg-gray-100 rounded">
                                                <span className="text-xs text-gray-600">
                                                  Detay:{' '}
                                                </span>
                                                <span className="text-sm text-gray-700">
                                                  {response.responseText}
                                                </span>
                                              </div>
                                            )}
                                          </div>
                                        )
                                      })}
                                    </div>
                                  </div>
                                ))}
                              </div>
                            </div>
                          )
                        }
                        return null
                      })()}

                      {/* Grup Bazlı Puanlar */}
                      <div>
                        <h4 className="font-medium text-gray-800 mb-2 text-sm">
                          📊 Grup Bazlı Puanlar
                        </h4>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                          {evaluationResult.groupScores.map((groupScore) => (
                            <div key={groupScore.groupId} className="bg-gray-50 p-2.5 rounded-lg">
                              <div className="flex justify-between items-center mb-2">
                                <h5 className="font-medium text-gray-700">
                                  {groupScore.groupName}
                                </h5>
                                <span className="text-lg font-bold text-blue-600">
                                  {groupScore.score}/{groupScore.maxScore}
                                </span>
                              </div>
                              <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
                                <div
                                  className="bg-blue-600 h-2 rounded-full"
                                  style={{ width: `${groupScore.percentage}%` }}
                                ></div>
                              </div>
                              <div className="flex justify-between text-sm text-gray-600">
                                <span>%{Math.round(groupScore.percentage)}</span>
                                <span>{groupScore.responseCount} cevap</span>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* Değerlendirici Tipi Bazlı Puanlar */}
                      <div>
                        <h4 className="font-medium text-gray-800 mb-2 text-sm">
                          👥 Değerlendirici Tipi Bazlı Puanlar
                        </h4>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                          {evaluationResult.assessorTypeScores.map((assessorScore, index) => (
                            <div key={index} className="bg-blue-50 p-2.5 rounded-lg text-center">
                              <div className="text-sm text-blue-700 font-medium mb-1">
                                {getAssessorTypeText(assessorScore.assessorType)}
                              </div>
                              <div className="text-2xl font-bold text-blue-800 mb-1">
                                %{Math.round(assessorScore.percentage)}
                              </div>
                              <div className="text-xs text-blue-600">
                                {assessorScore.averageScore}/{assessorScore.maxScore} puan
                              </div>
                              <div className="text-xs text-blue-500">
                                {assessorScore.assessorCount} değerlendirici
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* Güçlü Yönler */}
                      <div>
                        <h4 className="font-medium text-gray-800 mb-2 text-sm">💪 Güçlü Yönler</h4>
                        <div className="bg-green-50 p-2.5 rounded-lg">
                          {evaluationResult.strengths.length > 0 ? (
                            <ul className="list-disc list-inside space-y-1">
                              {evaluationResult.strengths.map((strength, index) => (
                                <li key={index} className="text-green-800">
                                  {strength}
                                </li>
                              ))}
                            </ul>
                          ) : (
                            <p className="text-green-700 italic">
                              Güçlü yönler henüz analiz edilmedi
                            </p>
                          )}
                        </div>
                      </div>

                      {/* Gelişim Alanları */}
                      <div>
                        <h4 className="font-medium text-gray-800 mb-2 text-sm">
                          📈 Gelişim Alanları
                        </h4>
                        <div className="bg-amber-50 p-2.5 rounded-lg">
                          {evaluationResult.developmentAreas.length > 0 ? (
                            <ul className="list-disc list-inside space-y-1">
                              {evaluationResult.developmentAreas.map((area, index) => (
                                <li key={index} className="text-amber-800">
                                  {area}
                                </li>
                              ))}
                            </ul>
                          ) : (
                            <p className="text-amber-700 italic">
                              Gelişim alanları henüz analiz edilmedi
                            </p>
                          )}
                        </div>
                      </div>

                      {/* Aksiyon Planı */}
                      <div>
                        <h4 className="font-medium text-gray-800 mb-2 text-sm">🎯 Aksiyon Planı</h4>
                        <div className="bg-purple-50 p-2.5 rounded-lg">
                          {evaluationResult.actionPlan.length > 0 ? (
                            <ul className="list-decimal list-inside space-y-1">
                              {evaluationResult.actionPlan.map((action, index) => (
                                <li key={index} className="text-purple-800">
                                  {action}
                                </li>
                              ))}
                            </ul>
                          ) : (
                            <p className="text-purple-700 italic">
                              Aksiyon planı henüz oluşturulmadı
                            </p>
                          )}
                        </div>
                      </div>

                      {/* Yorumlar */}
                      {(evaluationResult.managerComments || evaluationResult.hrComments) && (
                        <div>
                          <h4 className="font-medium text-gray-800 mb-2 text-sm">💬 Yorumlar</h4>
                          <div className="space-y-2">
                            {evaluationResult.managerComments && (
                              <div className="bg-blue-50 p-2.5 rounded-lg">
                                <h5 className="font-medium text-blue-800 mb-2">Yönetici Yorumu</h5>
                                <p className="text-blue-700">{evaluationResult.managerComments}</p>
                              </div>
                            )}
                            {evaluationResult.hrComments && (
                              <div className="bg-indigo-50 p-2.5 rounded-lg">
                                <h5 className="font-medium text-indigo-800 mb-2">İK Yorumu</h5>
                                <p className="text-indigo-700">{evaluationResult.hrComments}</p>
                              </div>
                            )}
                          </div>
                        </div>
                      )}
                    </div>
                  )
                })()}
              </div>
            </div>
            <div className="flex justify-end gap-2 p-2.5 border-t">
              <button
                onClick={handleCloseModal}
                className="px-2.5 py-1 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
              >
                Kapat
              </button>
              <button
                onClick={() => {
                  handleCloseModal()
                  handleEditEvaluationDetail(selectedResult)
                }}
                className="flex items-center gap-2 px-2.5 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
              >
                <FaEdit className="w-4 h-4" />
                Düzenle
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Result Edit Modal */}
      {showResultEditModal && selectedResult && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2">
          <div className="bg-white rounded-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center p-2.5 border-b">
              <h2 className="text-base font-semibold">Değerlendirme Düzenle</h2>
              <button
                onClick={handleCloseModal}
                className="p-1.5 text-gray-400 hover:text-gray-600"
              >
                <FaTimes className="w-4 h-4" />
              </button>
            </div>
            <div className="p-3 space-y-2.5">
              <div className="bg-amber-50 p-2.5 rounded-lg">
                <h3 className="font-medium text-amber-800 mb-2 text-sm">Değerlendirme Bilgileri</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <span className="text-sm text-amber-700 font-medium">Kampanya: </span>
                    <span className="text-sm text-amber-800">{selectedResult.campaignName}</span>
                  </div>
                  <div>
                    <span className="text-sm text-amber-700 font-medium">Değerlendirilen: </span>
                    <span className="text-sm text-amber-800">
                      {selectedResult.evaluatedEmployeeName}
                    </span>
                  </div>
                  <div>
                    <span className="text-sm text-amber-700 font-medium">Değerlendiren: </span>
                    <span className="text-sm text-amber-800">{selectedResult.evaluatorName}</span>
                  </div>
                  <div>
                    <span className="text-sm text-amber-700 font-medium">Değerlendiren Tipi: </span>
                    <span className="text-sm text-amber-800">
                      {getAssessorTypeText(selectedResult.evaluatorType)}
                    </span>
                  </div>
                </div>
              </div>

              {/* Soru Grupları ve Cevaplar */}
              {(() => {
                const evaluationResult = mockEvaluation360Results.find(
                  (r) => r.id === selectedResult.resultId,
                )
                const campaign = mockEvaluation360.find((c) => c.id === selectedResult.campaignId)
                const template = campaign
                  ? mockEvaluation360Templates.find((t) => t.id === campaign.templateId)
                  : null

                if (!evaluationResult || !template) {
                  return (
                    <div className="text-center py-8 text-gray-500">
                      <p>Template verisi bulunamadı</p>
                    </div>
                  )
                }

                return (
                  <div className="space-y-3">
                    <h3 className="text-sm font-medium text-gray-900">Soru Grupları ve Cevaplar</h3>

                    {template.questionGroups.map((group) => (
                      <div key={group.id} className="border rounded-lg p-2">
                        <div className="mb-3">
                          <h4 className="font-medium text-gray-900 text-sm">{group.groupName}</h4>
                          <p className="text-sm text-gray-600">{group.description}</p>
                          <div className="flex items-center gap-2 mt-2">
                            <span className="text-xs text-gray-500">Ağırlık: %{group.weight}</span>
                            <span className="text-xs text-gray-500">•</span>
                            <span className="text-xs text-gray-500">
                              {group.questions.length} soru
                            </span>
                          </div>
                        </div>

                        <div className="space-y-2.5">
                          {group.questions.map((question, qIndex) => {
                            const currentResponse = evaluationResult.participants
                              .flatMap((p) => p.responses)
                              .find((r) => r.questionId === question.id)

                            const editValue =
                              editResponses[question.id] !== undefined
                                ? editResponses[question.id]
                                : currentResponse?.responseValue

                            return (
                              <div key={question.id} className="bg-gray-50 p-2.5 rounded-lg">
                                <p className="font-medium text-gray-800 mb-3">
                                  {qIndex + 1}. {question.questionText}
                                  {question.isRequired && (
                                    <span className="text-red-500 ml-1">*</span>
                                  )}
                                </p>

                                {currentResponse && (
                                  <div className="mb-2 p-1.5 bg-blue-50 rounded">
                                    <span className="text-xs text-blue-700 font-medium">
                                      Mevcut Cevap:{' '}
                                    </span>
                                    <span className="text-xs text-blue-800">
                                      {typeof currentResponse.responseValue === 'string'
                                        ? currentResponse.responseValue
                                        : `${currentResponse.responseValue} puan`}
                                    </span>
                                    <span className="text-xs text-blue-600 ml-2">
                                      (Puan: {currentResponse.score})
                                    </span>
                                  </div>
                                )}

                                {/* Soru tipine göre düzenleme alanları */}
                                {question.questionType === QuestionTypeEnum.Rating && (
                                  <div className="space-y-2">
                                    <label className="text-sm text-gray-700 font-medium">
                                      Yeni Puan:
                                    </label>
                                    <div className="flex gap-2.5">
                                      {Array.from(
                                        {
                                          length:
                                            (question.maxRating || 5) -
                                            (question.minRating || 1) +
                                            1,
                                        },
                                        (_, i) => {
                                          const value = (question.minRating || 1) + i
                                          return (
                                            <label
                                              key={value}
                                              className="flex flex-col items-center cursor-pointer"
                                            >
                                              <input
                                                type="radio"
                                                name={`edit-question-${question.id}`}
                                                value={value}
                                                checked={editValue === value}
                                                onChange={(e) =>
                                                  handleEditResponseChange(
                                                    question.id,
                                                    Number(e.target.value),
                                                  )
                                                }
                                                className="mb-1"
                                              />
                                              <span className="text-xs text-gray-600">
                                                {question.ratingLabels?.[i] || value}
                                              </span>
                                            </label>
                                          )
                                        },
                                      )}
                                    </div>
                                  </div>
                                )}

                                {question.questionType === QuestionTypeEnum.Text && (
                                  <div>
                                    <label className="block text-sm text-gray-700 font-medium mb-2">
                                      Yeni Cevap:
                                    </label>
                                    <textarea
                                      className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                                      rows={3}
                                      placeholder="Yeni cevabı yazın..."
                                      value={editValue || ''}
                                      onChange={(e) =>
                                        handleEditResponseChange(question.id, e.target.value)
                                      }
                                    />
                                  </div>
                                )}

                                {question.questionType === QuestionTypeEnum.YesNo && (
                                  <div>
                                    <label className="block text-sm text-gray-700 font-medium mb-2">
                                      Yeni Cevap:
                                    </label>
                                    <div className="flex gap-4">
                                      <label className="flex items-center cursor-pointer">
                                        <input
                                          type="radio"
                                          name={`edit-question-${question.id}`}
                                          value="yes"
                                          checked={editValue === 'yes'}
                                          onChange={(e) =>
                                            handleEditResponseChange(question.id, e.target.value)
                                          }
                                          className="mr-2"
                                        />
                                        Evet
                                      </label>
                                      <label className="flex items-center cursor-pointer">
                                        <input
                                          type="radio"
                                          name={`edit-question-${question.id}`}
                                          value="no"
                                          checked={editValue === 'no'}
                                          onChange={(e) =>
                                            handleEditResponseChange(question.id, e.target.value)
                                          }
                                          className="mr-2"
                                        />
                                        Hayır
                                      </label>
                                    </div>
                                  </div>
                                )}

                                {question.questionType === QuestionTypeEnum.MultipleChoice && (
                                  <div>
                                    <label className="block text-sm text-gray-700 font-medium mb-2">
                                      Yeni Seçim:
                                    </label>
                                    <div className="space-y-2">
                                      {question.options?.map((option) => (
                                        <label
                                          key={option.id}
                                          className="flex items-center cursor-pointer"
                                        >
                                          <input
                                            type="radio"
                                            name={`edit-question-${question.id}`}
                                            value={option.value}
                                            checked={editValue === option.value}
                                            onChange={(e) =>
                                              handleEditResponseChange(
                                                question.id,
                                                Number(e.target.value),
                                              )
                                            }
                                            className="mr-2"
                                          />
                                          {option.optionText}
                                        </label>
                                      ))}
                                    </div>
                                  </div>
                                )}
                              </div>
                            )
                          })}
                        </div>
                      </div>
                    ))}
                  </div>
                )
              })()}

              {/* Yorumlar ve Durum */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Yönetici Yorumları
                  </label>
                  <textarea
                    className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                    rows={4}
                    placeholder="Yönetici yorumlarını buraya yazın..."
                    value={editManagerComments}
                    onChange={(e) => setEditManagerComments(e.target.value)}
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    İK Yorumları
                  </label>
                  <textarea
                    className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                    rows={4}
                    placeholder="İK yorumlarını buraya yazın..."
                    value={editHrComments}
                    onChange={(e) => setEditHrComments(e.target.value)}
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Sonuç Durumu</label>
                <select
                  className="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm"
                  value={editResultStatus}
                  onChange={(e) => setEditResultStatus(e.target.value)}
                >
                  <option value="PENDING">Beklemede</option>
                  <option value="IN_REVIEW">İncelemede</option>
                  <option value="APPROVED">Onaylandı</option>
                  <option value="PUBLISHED">Yayınlandı</option>
                </select>
              </div>

              {/* Mevcut Puan Bilgileri */}
              <div className="border rounded-lg p-3">
                <h4 className="font-medium text-gray-900 mb-2 text-sm">Mevcut Puan Bilgileri</h4>
                <div className="grid grid-cols-2 gap-3">
                  <div className="text-center p-4 bg-blue-50 rounded-lg">
                    <div className="text-2xl font-bold text-blue-600">
                      {selectedResult.overallScore}
                    </div>
                    <div className="text-sm text-blue-700">Toplam Puan</div>
                  </div>
                  <div className="text-center p-4 bg-green-50 rounded-lg">
                    <div className="text-2xl font-bold text-green-600">
                      %{selectedResult.scorePercentage}
                    </div>
                    <div className="text-sm text-green-700">Başarı Yüzdesi</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="flex justify-end gap-2 p-2.5 border-t">
              <button
                onClick={handleCloseModal}
                className="px-2.5 py-1 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
              >
                İptal
              </button>
              <button
                onClick={() => {
                  console.log('Güncellenen cevaplar:', editResponses)
                  console.log('Yönetici yorumları:', editManagerComments)
                  console.log('İK yorumları:', editHrComments)
                  console.log('Durum:', editResultStatus)
                  alert('Değerlendirme güncellendi!')
                  handleCloseModal()
                }}
                className="flex items-center gap-2 px-2.5 py-1 text-sm bg-green-600 text-white rounded-md hover:bg-green-700"
              >
                <FaSave className="w-4 h-4" />
                Kaydet
              </button>
            </div>
          </div>
        </div>
      )}
    </Container>
  )
}

export default Degree360Evaluation