import {
  ArrowRight,
  Loader2,
  Pencil,
  Plus,
  Power,
  PowerOff,
  Search,
  Trash2,
} from 'lucide-react';
import { useEffect, useState } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { seoApi } from '@/db/api';
import { useToast } from '@/hooks/use-toast';
import type { URLRedirect } from '@/types/seo';

export default function URLRedirectsPage() {
  const [redirects, setRedirects] = useState<URLRedirect[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingRedirect, setEditingRedirect] = useState<URLRedirect | null>(null);
  const { toast } = useToast();

  const [formData, setFormData] = useState<Partial<URLRedirect>>({
    from_path: '',
    to_path: '',
    redirect_type: 301,
    is_active: true,
  });

  useEffect(() => {
    loadRedirects();
  }, []);

  const loadRedirects = async () => {
    try {
      setLoading(true);
      const data = await seoApi.getRedirects();
      setRedirects(data);
    } catch (error) {
      console.error('Yönlendirmeler yükleme hatası:', error);
      toast({
        title: 'Hata',
        description: 'Yönlendirmeler yüklenemedi',
        variant: 'destructive',
      });
    } finally {
      setLoading(false);
    }
  };

  const handleOpenDialog = (redirect?: URLRedirect) => {
    if (redirect) {
      setEditingRedirect(redirect);
      setFormData(redirect);
    } else {
      setEditingRedirect(null);
      setFormData({
        from_path: '',
        to_path: '',
        redirect_type: 301,
        is_active: true,
      });
    }
    setDialogOpen(true);
  };

  const handleSave = async () => {
    try {
      if (!formData.from_path || !formData.to_path) {
        toast({
          title: 'Hata',
          description: 'Kaynak ve hedef yol zorunludur',
          variant: 'destructive',
        });
        return;
      }

      // Ensure paths start with /
      const from = formData.from_path.startsWith('/')
        ? formData.from_path
        : `/${formData.from_path}`;
      const to = formData.to_path.startsWith('/')
        ? formData.to_path
        : `/${formData.to_path}`;

      const data = {
        ...formData,
        from_path: from,
        to_path: to,
      };

      if (editingRedirect) {
        await seoApi.updateRedirect(editingRedirect.id, data);
        toast({
          title: 'Başarılı',
          description: 'Yönlendirme güncellendi',
        });
      } else {
        await seoApi.createRedirect(data as Omit<URLRedirect, 'id' | 'created_at' | 'updated_at'>);
        toast({
          title: 'Başarılı',
          description: 'Yönlendirme oluşturuldu',
        });
      }

      setDialogOpen(false);
      loadRedirects();
    } catch (error: any) {
      console.error('Yönlendirme kaydetme hatası:', error);
      toast({
        title: 'Hata',
        description: error.message || 'Yönlendirme kaydedilemedi',
        variant: 'destructive',
      });
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm('Bu yönlendirmeyi silmek istediğinizden emin misiniz?')) {
      return;
    }

    try {
      await seoApi.deleteRedirect(id);
      toast({
        title: 'Başarılı',
        description: 'Yönlendirme silindi',
      });
      loadRedirects();
    } catch (error) {
      console.error('Yönlendirme silme hatası:', error);
      toast({
        title: 'Hata',
        description: 'Yönlendirme silinemedi',
        variant: 'destructive',
      });
    }
  };

  const handleToggleActive = async (redirect: URLRedirect) => {
    try {
      await seoApi.updateRedirect(redirect.id, {
        is_active: !redirect.is_active,
      });
      toast({
        title: 'Başarılı',
        description: redirect.is_active
          ? 'Yönlendirme devre dışı bırakıldı'
          : 'Yönlendirme etkinleştirildi',
      });
      loadRedirects();
    } catch (error) {
      console.error('Yönlendirme durumu değiştirme hatası:', error);
      toast({
        title: 'Hata',
        description: 'Yönlendirme durumu değiştirilemedi',
        variant: 'destructive',
      });
    }
  };

  const filteredRedirects = redirects.filter(
    (redirect) =>
      redirect.from_path.toLowerCase().includes(searchQuery.toLowerCase()) ||
      redirect.to_path.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold">URL Yönlendirmeleri</h1>
            <p className="text-muted-foreground mt-2">
              301 ve 302 yönlendirmelerini yönetin
            </p>
          </div>
          <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
            <DialogTrigger asChild>
              <Button onClick={() => handleOpenDialog()}>
                <Plus className="w-4 h-4 mr-2" />
                Yeni Yönlendirme
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>
                  {editingRedirect ? 'Yönlendirme Düzenle' : 'Yeni Yönlendirme'}
                </DialogTitle>
                <DialogDescription>
                  URL yönlendirme bilgilerini girin
                </DialogDescription>
              </DialogHeader>

              <div className="space-y-4 py-4">
                <div className="space-y-2">
                  <Label htmlFor="from_path">Kaynak Yol *</Label>
                  <Input
                    id="from_path"
                    value={formData.from_path || ''}
                    onChange={(e) =>
                      setFormData({ ...formData, from_path: e.target.value })
                    }
                    placeholder="/old-page"
                    disabled={!!editingRedirect}
                  />
                  <p className="text-xs text-muted-foreground">
                    Yönlendirilecek eski URL (/ ile başlamalı)
                  </p>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="to_path">Hedef Yol *</Label>
                  <Input
                    id="to_path"
                    value={formData.to_path || ''}
                    onChange={(e) =>
                      setFormData({ ...formData, to_path: e.target.value })
                    }
                    placeholder="/new-page"
                  />
                  <p className="text-xs text-muted-foreground">
                    Yönlendirilecek yeni URL (/ ile başlamalı)
                  </p>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="redirect_type">Yönlendirme Tipi</Label>
                  <Select
                    value={String(formData.redirect_type || 301)}
                    onValueChange={(value) =>
                      setFormData({ ...formData, redirect_type: Number(value) })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="301">301 - Kalıcı Yönlendirme</SelectItem>
                      <SelectItem value="302">302 - Geçici Yönlendirme</SelectItem>
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-muted-foreground">
                    301: SEO değeri aktarılır (önerilir)
                    <br />
                    302: Geçici yönlendirme, SEO değeri aktarılmaz
                  </p>
                </div>
              </div>

              <DialogFooter>
                <Button variant="outline" onClick={() => setDialogOpen(false)}>
                  İptal
                </Button>
                <Button onClick={handleSave}>
                  {editingRedirect ? 'Güncelle' : 'Oluştur'}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>

        {/* Arama */}
        <div className="flex items-center gap-4">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
            <Input
              placeholder="Kaynak veya hedef yol ara..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

        {/* Tablo */}
        <Card>
          <CardHeader>
            <CardTitle>Yönlendirme Listesi</CardTitle>
            <CardDescription>
              Toplam {filteredRedirects.length} yönlendirme
            </CardDescription>
          </CardHeader>
          <CardContent>
            {loading ? (
              <div className="flex items-center justify-center h-64">
                <Loader2 className="w-8 h-8 animate-spin text-primary" />
              </div>
            ) : filteredRedirects.length === 0 ? (
              <div className="text-center py-12">
                <ArrowRight className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
                <p className="text-muted-foreground">
                  {searchQuery
                    ? 'Arama sonucu bulunamadı'
                    : 'Henüz yönlendirme eklenmemiş'}
                </p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Kaynak</TableHead>
                      <TableHead className="w-12"></TableHead>
                      <TableHead>Hedef</TableHead>
                      <TableHead>Tip</TableHead>
                      <TableHead>Durum</TableHead>
                      <TableHead className="text-right">İşlemler</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredRedirects.map((redirect) => (
                      <TableRow key={redirect.id}>
                        <TableCell className="font-mono text-sm">
                          {redirect.from_path}
                        </TableCell>
                        <TableCell>
                          <ArrowRight className="w-4 h-4 text-muted-foreground" />
                        </TableCell>
                        <TableCell className="font-mono text-sm">
                          {redirect.to_path}
                        </TableCell>
                        <TableCell>
                          <Badge variant={redirect.redirect_type === 301 ? 'default' : 'secondary'}>
                            {redirect.redirect_type}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <Badge variant={redirect.is_active ? 'default' : 'secondary'}>
                            {redirect.is_active ? 'Aktif' : 'Pasif'}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleToggleActive(redirect)}
                              title={redirect.is_active ? 'Devre Dışı Bırak' : 'Etkinleştir'}
                            >
                              {redirect.is_active ? (
                                <PowerOff className="w-4 h-4" />
                              ) : (
                                <Power className="w-4 h-4" />
                              )}
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleOpenDialog(redirect)}
                            >
                              <Pencil className="w-4 h-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleDelete(redirect.id)}
                            >
                              <Trash2 className="w-4 h-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Bilgilendirme */}
        <Card>
          <CardHeader>
            <CardTitle>Yönlendirme Tipleri Hakkında</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <h4 className="font-semibold mb-2">301 - Kalıcı Yönlendirme</h4>
              <p className="text-sm text-muted-foreground">
                Sayfa kalıcı olarak taşındığında kullanılır. SEO değeri (ranking, backlinks) yeni
                URL'ye aktarılır. Arama motorları eski URL'yi indekslerinden kaldırır.
              </p>
            </div>
            <div>
              <h4 className="font-semibold mb-2">302 - Geçici Yönlendirme</h4>
              <p className="text-sm text-muted-foreground">
                Sayfa geçici olarak başka bir URL'ye yönlendirildiğinde kullanılır. SEO değeri
                aktarılmaz. Arama motorları eski URL'yi indekslerinde tutar.
              </p>
            </div>
          </CardContent>
        </Card>
    </div>
  );
}
