import { useState } from 'react'
import { Badge, Button } from '@/components/ui'
import { Container } from '@/components/shared'
import { Dialog, Notification, toast } from '@/components/ui'
import type { BranchSeedResultDto } from '@/proxy/branch/seed'
import { runBranchSeed } from '@/services/branch.service'

function BranchSeed({
  open,
  onDialogClose,
  id,
  name,
}: {
  open: boolean
  onDialogClose: () => void
  id: string
  name: string
}) {
  const [isLoading, setIsLoading] = useState(false)
  const [result, setResult] = useState<BranchSeedResultDto | null>(null)

  const handleRunSeed = async () => {
    if (!id) return
    setIsLoading(true)
    try {
      const data = await runBranchSeed(id)
      setResult(data)

      if (data.success) {
        toast.push(<Notification title="Seed işlemi başarılı" type="success" />, {
          placement: 'top-end',
        })
      } else {
        toast.push(<Notification title="Seed işlemi başarısız" type="danger" />, {
          placement: 'top-end',
        })
      }
    } catch (error) {
      console.error(error)
      setResult({
        success: false,
        message: 'Seed işlemi sırasında hata oluştu.',
        totalInsertedCount: 0,
        details: [],
      })
      toast.push(<Notification title="Seed işlemi sırasında hata oluştu" type="danger" />, {
        placement: 'top-end',
      })
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Container>
      <Dialog
        width="75%"
        height="60%"
        isOpen={open}
        onClose={onDialogClose}
        onRequestClose={onDialogClose}
      >
        <h5 className="mb-4 text-lg font-semibold">Branch Seed - {name}</h5>
        <hr className="mb-3" />

        <div className="mt-3 space-y-4">
          {/* Başlık ve buton aynı satırda */}
          <div className="flex items-center justify-between">
            <div>
              {result &&
                (result.success ? (
                  <span className="text-green-600 font-semibold">✅ Seed İşlemi Başarılı</span>
                ) : (
                  <span className="text-red-600 font-semibold">❌ Seed İşlemi Başarısız</span>
                ))}
            </div>
            <div>
              <Button size="xs" variant="solid" onClick={handleRunSeed} loading={isLoading}>
                {isLoading ? 'Seed Çalıştırılıyor...' : 'Seed İşlemini Başlat'}
              </Button>
            </div>
          </div>

          {/* Sonuç Detayları */}
          {result && (
            <>
              <p className="font-medium text-gray-700">{result.message}</p>

              <p className="text-sm text-gray-600">
                Toplam eklenen kayıt:{' '}
                <span className="font-bold text-blue-600">{result.totalInsertedCount}</span>
              </p>

              {/* Detay Tablosu */}
              {result.details.length > 0 && (
                <div className="overflow-x-auto overflow-y-auto border border-gray-200 rounded-md max-h-[50vh]">
                  <table className="min-w-full text-sm">
                    <thead className="bg-gray-100 sticky top-0">
                      <tr>
                        <th className="border px-3 py-2 text-left">Entity</th>
                        <th className="border px-3 py-2 text-left">Eklenen</th>
                        <th className="border px-3 py-2 text-left">Uyarılar</th>
                        <th className="border px-3 py-2 text-left">Hatalar</th>
                      </tr>
                    </thead>
                    <tbody>
                      {result.details.map((d) => (
                        <tr key={d.entityName} className="hover:bg-gray-50">
                          <td className="border px-3 py-2 font-semibold text-gray-700">
                            <div className="flex items-center gap-2">
                              <span>{d.entityName}</span>
                              <Badge content={d.insertedCount} />
                            </div>
                          </td>
                          {/* Eklenen kolonunu tek satır formatında göster */}
                          <td className="border px-3 py-2">{d.insertedItems.join(', ')}</td>

                          <td className="border px-3 py-2 text-yellow-700">
                            {d.warnings.join(', ')}
                          </td>

                          <td className="border px-3 py-2 text-red-700">{d.errors.join(', ')}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}

              {!result.details.length && (
                <p className="text-gray-500 text-sm">Hiç detay bilgisi bulunamadı.</p>
              )}
            </>
          )}
        </div>
      </Dialog>
    </Container>
  )
}

export default BranchSeed