"use client"

import { useState } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
    Form,
    FormControl,
    FormDescription,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { toast } from "sonner"
import { Loader2, Send } from "lucide-react"
import { updateSmsSettings, sendTestSms } from "@/lib/sms/actions"

const smsSettingsSchema = z.object({
    username: z.string().min(1, "Kullanıcı adı gereklidir."),
    password: z.string().optional(),
    header: z.string().min(1, "Başlık (Gönderici Adı) gereklidir."),
})

type SmsSettingsValues = z.infer<typeof smsSettingsSchema>

interface SmsSettingsFormProps {
    initialData: {
        username: string
        header: string
    } | null
}

export function SmsSettingsForm({ initialData }: SmsSettingsFormProps) {
    const [loading, setLoading] = useState(false)
    const [testLoading, setTestLoading] = useState(false)
    const [testPhone, setTestPhone] = useState("")

    const form = useForm<SmsSettingsValues>({
        resolver: zodResolver(smsSettingsSchema),
        defaultValues: {
            username: initialData?.username || "",
            header: initialData?.header || "",
            password: "",
        },
    })

    const onSubmit = async (data: SmsSettingsValues) => {
        setLoading(true)
        try {
            const result = await updateSmsSettings({
                username: data.username,
                password: data.password,
                header: data.header,
            })

            if (result.error) {
                toast.error(result.error)
                return
            }

            toast.success("SMS ayarları güncellendi.")
            // Don't reset form fully, keeps values visible except password
            form.setValue("password", "")
        } catch {
            toast.error("Bir sorun oluştu.")
        } finally {
            setLoading(false)
        }
    }

    const onTestSms = async () => {
        if (!testPhone) {
            toast.error("Lütfen bir test numarası girin.")
            return
        }

        setTestLoading(true)
        try {
            const result = await sendTestSms(testPhone)
            if (result.error) {
                toast.error("Test başarısız: " + result.error)
            } else {
                toast.success("Test SMS başarıyla gönderildi!")
            }
        } catch {
            toast.error("Test sırasında bir hata oluştu.")
        } finally {
            setTestLoading(false)
        }
    }

    return (
        <div className="grid gap-6">
            <Card>
                <CardHeader>
                    <CardTitle>NetGSM Konfigürasyonu</CardTitle>
                    <CardDescription>
                        NetGSM API bilgilerinizi buradan yönetebilirsiniz. Şifre alanı sadece değiştirmek istediğinizde gereklidir.
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    <Form {...form}>
                        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                            <FormField
                                control={form.control}
                                name="username"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>NetGSM Kullanıcı Adı (850...)</FormLabel>
                                        <FormControl>
                                            <Input placeholder="850xxxxxxx" {...field} />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />

                            <FormField
                                control={form.control}
                                name="password"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Şifre</FormLabel>
                                        <FormControl>
                                            <Input type="password" placeholder="••••••••" {...field} />
                                        </FormControl>
                                        <FormDescription>
                                            Mevcut şifreyi korumak için boş bırakın.
                                        </FormDescription>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />

                            <FormField
                                control={form.control}
                                name="header"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Mesaj Başlığı (Gönderici Adı)</FormLabel>
                                        <FormControl>
                                            <Input placeholder="PARAKASA" {...field} />
                                        </FormControl>
                                        <FormDescription>
                                            NetGSM panelinde tanımlı gönderici adınız.
                                        </FormDescription>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />

                            <Button type="submit" disabled={loading}>
                                {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                Ayarları Kaydet
                            </Button>
                        </form>
                    </Form>
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle>Bağlantı Testi</CardTitle>
                    <CardDescription>
                        Ayarların doğru çalıştığını doğrulamak için test SMS gönderin.
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="flex gap-4">
                        <div className="grid gap-2 flex-1">
                            <Input
                                placeholder="5551234567"
                                value={testPhone}
                                onChange={(e) => setTestPhone(e.target.value)}
                            />
                            <p className="text-[0.8rem] text-muted-foreground">
                                Başında 0 olmadan 10 hane giriniz.
                            </p>
                        </div>
                        <Button variant="secondary" onClick={onTestSms} disabled={testLoading || !testPhone}>
                            {testLoading ? (
                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                            ) : (
                                <Send className="mr-2 h-4 w-4" />
                            )}
                            Test Gönder
                        </Button>
                    </div>
                </CardContent>
            </Card>
        </div>
    )
}