import { useState } from 'react';
import { supabase } from '@/db/supabase';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';
import { AlertCircle, CheckCircle2, UserPlus } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

export default function ManualUserSync() {
  const { toast } = useToast();
  const [isLoading, setIsLoading] = useState(false);
  const [formData, setFormData] = useState({
    clerkUserId: '',
    email: '',
    username: '',
    fullName: '',
  });
  const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setResult(null);

    try {
      // Check if profile already exists
      const { data: existing } = await supabase
        .from('profiles')
        .select('id, email')
        .eq('email', formData.email)
        .maybeSingle();

      if (existing) {
        setResult({
          success: false,
          message: `Bu email ile zaten bir profil var: ${(existing as any).email}`
        });
        setIsLoading(false);
        return;
      }

      // Create profile
      const { data, error } = await (supabase
        .from('profiles')
        .insert({
          clerk_user_id: formData.clerkUserId || null,
          email: formData.email,
          username: formData.username || formData.email.split('@')[0],
          full_name: formData.fullName || null,
          role: 'user',
          is_active: true,
        } as any)
        .select()
        .single());

      if (error) {
        throw error;
      }

      setResult({
        success: true,
        message: `Profil başarıyla oluşturuldu: ${(data as any).email}`
      });

      toast({
        title: 'Başarılı',
        description: 'Kullanıcı profili oluşturuldu'
      });

      // Reset form
      setFormData({
        clerkUserId: '',
        email: '',
        username: '',
        fullName: '',
      });
    } catch (error: any) {
      console.error('Profile creation error:', error);
      setResult({
        success: false,
        message: `Hata: ${error.message}`
      });

      toast({
        title: 'Hata',
        description: 'Profil oluşturulamadı',
        variant: 'destructive'
      });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="container mx-auto p-6 max-w-2xl">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <UserPlus className="h-5 w-5" />
            Manuel Kullanıcı Senkronizasyonu
          </CardTitle>
          <CardDescription>
            Clerk'te kayıtlı ancak database'de profili olmayan kullanıcıları manuel olarak ekleyin
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Alert className="mb-6">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>Kullanım Talimatları</AlertTitle>
            <AlertDescription>
              <ol className="list-decimal list-inside space-y-1 mt-2 text-sm">
                <li>Clerk Dashboard → Users sayfasına gidin</li>
                <li>Kullanıcıyı bulun ve User ID'yi kopyalayın</li>
                <li>Aşağıdaki formu doldurun</li>
                <li>Profil oluşturulduktan sonra kullanıcı giriş yapabilir</li>
              </ol>
            </AlertDescription>
          </Alert>

          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="clerkUserId">
                Clerk User ID <span className="text-muted-foreground">(Opsiyonel)</span>
              </Label>
              <Input
                id="clerkUserId"
                placeholder="user_xxxxxxxxxxxxx"
                value={formData.clerkUserId}
                onChange={(e) => setFormData({ ...formData, clerkUserId: e.target.value })}
              />
              <p className="text-xs text-muted-foreground">
                Clerk Dashboard'dan kopyalayın. Boş bırakılırsa kullanıcı giriş yaptığında otomatik bağlanır.
              </p>
            </div>

            <div className="space-y-2">
              <Label htmlFor="email">
                Email <span className="text-red-500">*</span>
              </Label>
              <Input
                id="email"
                type="email"
                placeholder="kullanici@example.com"
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                required
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="username">
                Kullanıcı Adı <span className="text-muted-foreground">(Opsiyonel)</span>
              </Label>
              <Input
                id="username"
                placeholder="kullanici_adi"
                value={formData.username}
                onChange={(e) => setFormData({ ...formData, username: e.target.value })}
              />
              <p className="text-xs text-muted-foreground">
                Boş bırakılırsa email'den otomatik oluşturulur
              </p>
            </div>

            <div className="space-y-2">
              <Label htmlFor="fullName">
                Tam Ad <span className="text-muted-foreground">(Opsiyonel)</span>
              </Label>
              <Input
                id="fullName"
                placeholder="Ad Soyad"
                value={formData.fullName}
                onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
              />
            </div>

            <Button type="submit" disabled={isLoading} className="w-full">
              {isLoading ? 'Oluşturuluyor...' : 'Profil Oluştur'}
            </Button>
          </form>

          {result && (
            <Alert className={`mt-6 ${result.success ? 'border-green-500' : 'border-red-500'}`}>
              {result.success ? (
                <CheckCircle2 className="h-4 w-4 text-green-500" />
              ) : (
                <AlertCircle className="h-4 w-4 text-red-500" />
              )}
              <AlertTitle>{result.success ? 'Başarılı' : 'Hata'}</AlertTitle>
              <AlertDescription>{result.message}</AlertDescription>
            </Alert>
          )}

          <div className="mt-6 p-4 bg-muted rounded-lg">
            <h4 className="font-semibold mb-2">Sonraki Adımlar</h4>
            <ol className="list-decimal list-inside space-y-1 text-sm text-muted-foreground">
              <li>Profil oluşturulduktan sonra kullanıcı giriş yapabilir</li>
              <li>Provider olmak için <code>/provider-info</code> sayfasını ziyaret etmeli</li>
              <li>"Provider Olarak Kayıt Ol" butonuna tıklamalı</li>
              <li>İşletme bilgilerini doldurmalı</li>
              <li>Admin panelinde görünecek</li>
            </ol>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
