"use client"

import { useState, useEffect } from 'react'
import { 
  Search, Plus, ClipboardList, Calendar, Building2, CheckCircle, 
  RefreshCw, Loader2, X, AlertCircle, Eye, Trash2, ChevronLeft, ChevronRight
} from 'lucide-react'
import CustomSelect from '@/components/ui/custom-select'
import { getSupabaseClient } from '@/lib/supabase/client'
import { useAuth } from '@/lib/auth/AuthProvider'
import { useVisibilityRefresh } from '@/lib/hooks/useVisibilityRefresh'

interface ServiceType {
  id: string
  category: string
  name: string
  description: string | null
}

interface Company {
  id: string
  company_name: string
  email: string
  employee_count: number | null
}

interface CompanyService {
  id: string
  company_id: string
  service_type_id: string
  status: string
  start_date: string | null
  end_date: string | null
  price: number | null
  notes: string | null
  created_at: string
  service_types?: { name: string; category: string }
}

const statusConfig: Record<string, { label: string; color: string }> = {
  active: { label: 'Aktif', color: 'emerald' },
  pending: { label: 'Beklemede', color: 'amber' },
  completed: { label: 'Tamamlandı', color: 'blue' },
  cancelled: { label: 'İptal', color: 'red' },
}

export default function HizmetlerPage() {
  const { user } = useAuth()
  const [services, setServices] = useState<CompanyService[]>([])
  const [serviceTypes, setServiceTypes] = useState<ServiceType[]>([])
  const [companies, setCompanies] = useState<Company[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  
  // Modals
  const [showAddModal, setShowAddModal] = useState(false)
  const [showServicesModal, setShowServicesModal] = useState(false)
  const [selectedCompany, setSelectedCompany] = useState<Company | null>(null)
  const [companyServices, setCompanyServices] = useState<CompanyService[]>([])
  
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState('')
  const [currentPage, setCurrentPage] = useState(1)
  const itemsPerPage = 12

  const [formData, setFormData] = useState({
    companyId: '',
    selectedServiceIds: [] as string[],
    startDate: '',
    price: '',
    status: 'active'
  })

  const supabase = getSupabaseClient()

  const fetchData = async () => {
    if (!user) return
    setLoading(true)
    try {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const [servicesRes, typesRes, companiesRes] = await Promise.all([
        (supabase as any).from('company_services').select('*, service_types(name, category)').order('created_at', { ascending: false }),
        (supabase as any).from('service_types').select('*').eq('is_active', true).order('name'),
        (supabase as any).from('companies').select('id, company_name, email, employee_count').eq('is_active', true).order('company_name')
      ])
      if (servicesRes.data) setServices(servicesRes.data)
      if (typesRes.data) setServiceTypes(typesRes.data)
      if (companiesRes.data) setCompanies(companiesRes.data)
    } catch (err) { console.error('Fetch error:', err) }
    setLoading(false)
  }

  useEffect(() => { if (user) fetchData() }, [user])
  useVisibilityRefresh(fetchData, !!user)

  // Şirket bazlı hizmet sayıları
  const getCompanyStats = (companyId: string) => {
    const compServices = services.filter(s => s.company_id === companyId)
    return {
      total: compServices.length,
      active: compServices.filter(s => s.status === 'active').length
    }
  }

  const openServicesModal = (company: Company) => {
    setSelectedCompany(company)
    setCompanyServices(services.filter(s => s.company_id === company.id))
    setShowServicesModal(true)
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    if (formData.selectedServiceIds.length === 0) { setError('En az bir hizmet seçin'); return }
    setSubmitting(true)
    try {
      const insertData = formData.selectedServiceIds.map(serviceTypeId => ({
        company_id: formData.companyId,
        service_type_id: serviceTypeId,
        start_date: formData.startDate || null,
        price: formData.price ? parseFloat(formData.price) : null,
        status: formData.status
      }))
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const { error } = await (supabase as any).from('company_services').insert(insertData)
      if (error) throw error
      setShowAddModal(false)
      setFormData({ companyId: '', selectedServiceIds: [], startDate: '', price: '', status: 'active' })
      fetchData()
    } catch (err) { setError(err instanceof Error ? err.message : 'Bir hata oluştu') }
    setSubmitting(false)
  }

  const updateServiceStatus = async (serviceId: string, newStatus: string) => {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    await (supabase as any).from('company_services').update({ status: newStatus }).eq('id', serviceId)
    fetchData()
    // Modal içindeki listeyi de güncelle
    setCompanyServices(prev => prev.map(s => s.id === serviceId ? { ...s, status: newStatus } : s))
  }

  const deleteService = async (serviceId: string) => {
    if (!confirm('Bu hizmeti silmek istediğinize emin misiniz?')) return
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    await (supabase as any).from('company_services').delete().eq('id', serviceId)
    fetchData()
    setCompanyServices(prev => prev.filter(s => s.id !== serviceId))
  }

  const toggleService = (id: string) => {
    setFormData(prev => ({
      ...prev,
      selectedServiceIds: prev.selectedServiceIds.includes(id)
        ? prev.selectedServiceIds.filter(x => x !== id)
        : [...prev.selectedServiceIds, id]
    }))
  }

  const formatDate = (d: string | null) => d ? new Date(d).toLocaleDateString('tr-TR') : '-'

  // Filtreleme - tüm aktif şirketler (hizmeti olsun olmasın)
  const filteredCompanies = companies.filter(c => {
    if (!search) return true
    return c.company_name.toLowerCase().includes(search.toLowerCase())
  })

  // Pagination hesaplamaları
  const totalPages = Math.ceil(filteredCompanies.length / itemsPerPage)
  const startIndex = (currentPage - 1) * itemsPerPage
  const endIndex = startIndex + itemsPerPage
  const paginatedCompanies = filteredCompanies.slice(startIndex, endIndex)

  // Hizmeti olan şirket sayısı
  const companiesWithServicesCount = companies.filter(c => getCompanyStats(c.id).total > 0).length

  // Arama değiştiğinde ilk sayfaya dön
  useEffect(() => {
    setCurrentPage(1)
  }, [search])

  const totalServices = services.length
  const activeServices = services.filter(s => s.status === 'active').length

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <h1 className="page-title">Hizmetler</h1>
        <div className="flex items-center gap-3">
          <button onClick={fetchData} disabled={loading}
            className="p-2.5 bg-white border border-gray-200 hover:bg-gray-50 text-gray-500 rounded-xl transition-colors disabled:opacity-50">
            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
          </button>
          <button onClick={() => setShowAddModal(true)}
            className="flex items-center gap-2 px-4 py-2.5 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-medium transition-colors">
            <Plus className="w-4 h-4" /> Hizmet Ata
          </button>
        </div>
      </div>

      {/* Stats & Search */}
      <div className="flex flex-col gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
          <input type="text" placeholder="Şirket ara..." value={search} onChange={(e) => setSearch(e.target.value)}
            className="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20" />
        </div>
        <div className="flex flex-wrap items-center gap-2 sm:gap-4 text-sm">
          <div className="flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-xl">
            <Building2 className="w-4 h-4 text-gray-400" />
            <span className="text-gray-600">{filteredCompanies.length} şirket</span>
          </div>
          <div className="flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-xl">
            <ClipboardList className="w-4 h-4 text-gray-400" />
            <span className="text-gray-600">{totalServices} hizmet</span>
            <span className="text-emerald-500">({activeServices} aktif)</span>
          </div>
        </div>
      </div>

      {/* Company Cards Grid */}
      {loading && companies.length === 0 ? (
        <div className="flex items-center justify-center py-12">
          <Loader2 className="w-6 h-6 text-blue-500 animate-spin" />
        </div>
      ) : filteredCompanies.length === 0 ? (
        <div className="text-center py-12 bg-white rounded-xl border border-gray-200">
          <ClipboardList className="w-10 h-10 text-gray-200 mx-auto mb-2" />
          <p className="text-gray-400">Şirket bulunamadı</p>
        </div>
      ) : (
        <>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {paginatedCompanies.map(company => {
              const stats = getCompanyStats(company.id)
              const hasNoServices = stats.total === 0
              return (
                <div key={company.id} className={`rounded-xl border-2 p-4 hover:shadow-md transition-all ${
                  hasNoServices 
                    ? 'bg-gradient-to-br from-amber-50 to-orange-50 border-amber-300 hover:border-amber-400' 
                    : 'bg-gradient-to-br from-gray-50 to-gray-100 border-gray-300 hover:border-blue-400'
                }`}>
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex items-center gap-3">
                      <div className={`w-10 h-10 rounded-lg flex items-center justify-center border ${
                        hasNoServices ? 'bg-amber-100 border-amber-200' : 'bg-blue-50 border-blue-200'
                      }`}>
                        <Building2 className={`w-5 h-5 ${hasNoServices ? 'text-amber-500' : 'text-blue-500'}`} />
                      </div>
                      <div>
                        <h3 className="font-medium text-gray-800 text-sm">{company.company_name}</h3>
                        <p className="text-xs text-gray-500">{company.employee_count || 0} çalışan</p>
                      </div>
                    </div>
                  </div>
                  
                  {hasNoServices ? (
                    <div className="mb-3">
                      <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-amber-100 text-amber-700 rounded-lg text-xs font-medium">
                        <AlertCircle className="w-3.5 h-3.5" />
                        Hizmet Atanmamış
                      </span>
                    </div>
                  ) : (
                    <div className="flex items-center justify-between mb-3">
                      <div className="flex items-center gap-3">
                        <div className="text-center">
                          <p className="text-lg font-semibold text-gray-800">{stats.total}</p>
                          <p className="text-[10px] text-gray-500 uppercase">Hizmet</p>
                        </div>
                        <div className="w-px h-8 bg-gray-300" />
                        <div className="text-center">
                          <p className="text-lg font-semibold text-emerald-500">{stats.active}</p>
                          <p className="text-[10px] text-gray-500 uppercase">Aktif</p>
                        </div>
                      </div>
                    </div>
                  )}

                  <button onClick={() => openServicesModal(company)}
                    className={`w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors border ${
                      hasNoServices 
                        ? 'bg-amber-500 hover:bg-amber-600 text-white border-amber-500'
                        : 'bg-white hover:bg-blue-50 text-gray-600 hover:text-blue-600 border-gray-200'
                    }`}>
                    {hasNoServices ? (
                      <><Plus className="w-4 h-4" /> Hizmet Ata</>
                    ) : (
                      <><Eye className="w-4 h-4" /> Hizmetleri Görüntüle</>
                    )}
                  </button>
                </div>
              )
            })}
          </div>

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-6">
              <div className="flex items-center gap-1 sm:gap-2">
                <button
                  onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
                  disabled={currentPage === 1}
                  className="p-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  <ChevronLeft className="w-5 h-5 text-gray-600" />
                </button>
                
                <div className="flex items-center gap-1">
                  {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
                    <button
                      key={page}
                      onClick={() => setCurrentPage(page)}
                      className={`w-8 h-8 sm:w-9 sm:h-9 rounded-lg font-medium text-sm transition-colors ${
                        currentPage === page
                          ? 'bg-blue-500 text-white'
                          : 'bg-white border border-gray-300 text-gray-600 hover:bg-gray-50'
                      }`}
                    >
                      {page}
                    </button>
                  ))}
                </div>
                
                <button
                  onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
                  disabled={currentPage === totalPages}
                  className="p-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  <ChevronRight className="w-5 h-5 text-gray-600" />
                </button>
              </div>
              
              <span className="text-sm text-gray-500">
                {startIndex + 1}-{Math.min(endIndex, filteredCompanies.length)} / {filteredCompanies.length}
              </span>
            </div>
          )}
        </>
      )}

      {/* Services Modal - Şirketin hizmetlerini görüntüle/düzenle */}
      {showServicesModal && selectedCompany && (
        <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-2 sm:p-4" onClick={() => setShowServicesModal(false)}>
          <div onClick={(e) => e.stopPropagation()} className="bg-white rounded-2xl w-full max-w-2xl border border-gray-200 shadow-xl max-h-[95vh] sm:max-h-[85vh] flex flex-col">
            <div className="p-5 border-b border-gray-100 flex items-center justify-between">
              <div>
                <h2 className="text-lg font-semibold text-gray-800">{selectedCompany.company_name}</h2>
                <p className="text-gray-400 text-sm">{companyServices.length} hizmet atanmış</p>
              </div>
              <button onClick={() => setShowServicesModal(false)} className="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100">
                <X className="w-5 h-5" />
              </button>
            </div>
            
            <div className="flex-1 overflow-y-auto p-5">
              {companyServices.length === 0 ? (
                <div className="text-center py-8">
                  <ClipboardList className="w-10 h-10 text-gray-200 mx-auto mb-2" />
                  <p className="text-gray-400 text-sm">Bu şirkete henüz hizmet atanmamış</p>
                </div>
              ) : (
                <div className="space-y-3">
                  {companyServices.map(service => {
                    const status = statusConfig[service.status] || statusConfig.pending
                    const isCancelled = service.status === 'cancelled'
                    return (
                      <div key={service.id} className={`flex flex-col sm:flex-row sm:items-center justify-between p-3 sm:p-4 rounded-xl group gap-3 ${
                        isCancelled ? 'bg-red-50 border border-red-200' : 'bg-gray-50'
                      }`}>
                        <div className="flex items-center gap-3">
                          <div className={`w-9 h-9 rounded-lg flex items-center justify-center border flex-shrink-0 ${
                            isCancelled ? 'bg-red-100 border-red-200' : 'bg-white border-gray-200'
                          }`}>
                            <ClipboardList className={`w-4 h-4 ${isCancelled ? 'text-red-500' : 'text-gray-500'}`} />
                          </div>
                          <div className="min-w-0">
                            <p className={`text-sm font-medium truncate ${isCancelled ? 'text-red-600 line-through' : 'text-gray-800'}`}>
                              {service.service_types?.name || '-'}
                            </p>
                            <div className="flex flex-wrap items-center gap-2 sm:gap-3 text-xs text-gray-400">
                              <span className="flex items-center gap-1">
                                <Calendar className="w-3 h-3" />
                                {formatDate(service.start_date)}
                              </span>
                              {service.price && (
                                <span className={`font-medium ${isCancelled ? 'text-gray-400' : 'text-emerald-600'}`}>
                                  {service.price.toLocaleString('tr-TR')} ₺/ay
                                </span>
                              )}
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center gap-2 ml-12 sm:ml-0">
                          <span className={`px-2.5 py-1 text-xs font-medium rounded-lg ${
                            status.color === 'emerald' ? 'bg-emerald-50 text-emerald-600' :
                            status.color === 'amber' ? 'bg-amber-50 text-amber-600' :
                            status.color === 'blue' ? 'bg-blue-50 text-blue-600' : 'bg-red-50 text-red-600'
                          }`}>{status.label}</span>
                          <CustomSelect
                            name={`status-${service.id}`}
                            value={service.status}
                            onChange={(e) => updateServiceStatus(service.id, e.target.value)}
                            placeholder="Durum"
                            variant="admin"
                            className="w-28"
                            options={[
                              { value: 'active', label: 'Aktif' },
                              { value: 'pending', label: 'Beklemede' },
                              { value: 'completed', label: 'Tamamlandı' },
                              { value: 'cancelled', label: 'İptal' },
                            ]}
                          />
                          <button onClick={() => deleteService(service.id)}
                            className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg sm:opacity-0 sm:group-hover:opacity-100 transition-all">
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                      </div>
                    )
                  })}
                </div>
              )}
            </div>
            
            <div className="p-5 border-t border-gray-100">
              <button onClick={() => { setShowServicesModal(false); setFormData(prev => ({ ...prev, companyId: selectedCompany.id })); setShowAddModal(true) }}
                className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-medium transition-colors">
                <Plus className="w-4 h-4" /> Yeni Hizmet Ekle
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Add Service Modal */}
      {showAddModal && (
        <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-2 sm:p-4" onClick={() => setShowAddModal(false)}>
          <div onClick={(e) => e.stopPropagation()} className="bg-white rounded-2xl w-full max-w-lg border border-gray-200 shadow-xl max-h-[95vh] sm:max-h-[85vh] flex flex-col">
            <div className="p-5 border-b border-gray-100 flex items-center justify-between">
              <div>
                <h2 className="text-lg font-semibold text-gray-800">Hizmet Ata</h2>
                <p className="text-gray-400 text-sm">Şirkete yeni hizmet ekleyin</p>
              </div>
              <button onClick={() => setShowAddModal(false)} className="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100">
                <X className="w-5 h-5" />
              </button>
            </div>
            
            <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-5 space-y-4">
              {error && (
                <div className="p-3 bg-red-50 border border-red-200 rounded-xl text-red-600 text-sm flex items-center gap-2">
                  <AlertCircle className="w-4 h-4" />{error}
                </div>
              )}

              <div>
                <label className="block text-sm font-medium text-gray-600 mb-1.5">Şirket *</label>
                <CustomSelect
                  name="companyId"
                  value={formData.companyId}
                  onChange={(e) => setFormData(prev => ({ ...prev, companyId: e.target.value }))}
                  placeholder="Şirket seçin"
                  required
                  variant="admin"
                  options={companies.map(c => ({ value: c.id, label: c.company_name }))}
                />
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-600 mb-1.5">Başlangıç Tarihi</label>
                  <input type="date" value={formData.startDate} onChange={(e) => setFormData(prev => ({ ...prev, startDate: e.target.value }))}
                    className="w-full px-3 py-2.5 bg-white border border-gray-200 rounded-xl text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-600 mb-1.5">Aylık Fiyat (₺)</label>
                  <input type="number" placeholder="Örn: 5000" value={formData.price} onChange={(e) => setFormData(prev => ({ ...prev, price: e.target.value }))}
                    className="w-full px-3 py-2.5 bg-white border border-gray-200 rounded-xl text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20" />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-600 mb-1.5">Durum</label>
                <CustomSelect
                  name="status"
                  value={formData.status}
                  onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))}
                  placeholder="Durum seçin"
                  variant="admin"
                  options={[
                    { value: 'active', label: 'Aktif' },
                    { value: 'pending', label: 'Beklemede' },
                  ]}
                />
              </div>

              <div>
                <div className="flex items-center justify-between mb-2">
                  <label className="text-sm font-medium text-gray-600">Hizmetler *</label>
                  <span className="text-xs text-gray-400">{formData.selectedServiceIds.length} seçili</span>
                </div>
                <div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto p-1">
                  {serviceTypes.map(service => (
                    <label key={service.id}
                      className={`flex items-center gap-2 p-2.5 rounded-lg border cursor-pointer transition-all text-sm ${
                        formData.selectedServiceIds.includes(service.id)
                          ? 'bg-blue-50 border-blue-200 text-blue-700'
                          : 'bg-gray-50 border-gray-200 text-gray-600 hover:bg-gray-100'
                      }`}>
                      <input type="checkbox" checked={formData.selectedServiceIds.includes(service.id)}
                        onChange={() => toggleService(service.id)} className="sr-only" />
                      {formData.selectedServiceIds.includes(service.id) && <CheckCircle className="w-4 h-4 text-blue-500 flex-shrink-0" />}
                      <span className="truncate">{service.name}</span>
                    </label>
                  ))}
                </div>
              </div>
            </form>
            
            <div className="p-5 border-t border-gray-100 flex gap-3">
              <button type="button" onClick={() => setShowAddModal(false)}
                className="flex-1 px-4 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-medium transition-colors">
                İptal
              </button>
              <button type="submit" onClick={handleSubmit} disabled={submitting || !formData.companyId || formData.selectedServiceIds.length === 0}
                className="flex-1 px-4 py-2.5 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-medium transition-colors disabled:opacity-50 flex items-center justify-center gap-2">
                {submitting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
                {submitting ? 'Kaydediliyor...' : 'Hizmet Ata'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}