"use client"

import * as React from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Loader2 } from "lucide-react"
import { useRouter } from "next/navigation"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { RichTextEditor } from "@/components/ui/rich-text-editor"
import { Checkbox } from "@/components/ui/checkbox"
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useSessionStore } from "@/entities/session/store"

const registerSchema = z.object({
    phone: z.string().min(10, "Номер телефона должен содержать минимум 10 цифр"),
    firstName: z.string()
        .min(2, "Имя должно содержать минимум 2 символа")
        .regex(/^[^0-9]*$/, "Имя не должно содержать цифры"),
    lastName: z.string()
        .min(2, "Фамилия должна содержать минимум 2 символа")
        .regex(/^[^0-9]*$/, "Фамилия не должна содержать цифры"),
    isCompany: z.boolean(),
    companyName: z.string().optional(),
    inn: z.string().optional(),
    description: z.string()
        .max(2048, "Описание не может превышать 2048 символов")
        .optional(),
    password: z.string().min(6, "Пароль должен быть не менее 6 символов"),
    confirmPassword: z.string().min(6),
}).refine((data) => data.password === data.confirmPassword, {
    message: "Пароли не совпадают",
    path: ["confirmPassword"],
}).refine((data) => !data.isCompany || (data.companyName && data.companyName.length >= 2), {
    message: "Название компании обязательно",
    path: ["companyName"],
}).refine((data) => !data.isCompany || (data.inn && data.inn.length === 10), {
    message: "ИНН должен содержать 10 цифр",
    path: ["inn"],
})

type RegisterValues = z.infer<typeof registerSchema>

export function RegisterForm() {
    const router = useRouter()
    const { register, isLoading } = useSessionStore()

    const form = useForm<RegisterValues>({
        resolver: zodResolver(registerSchema),
        defaultValues: {
            phone: "",
            firstName: "",
            lastName: "",
            isCompany: false,
            companyName: "",
            inn: "",
            description: "",
            password: "",
            confirmPassword: "",
        },
    })

    const isCompany = form.watch("isCompany")

    async function onSubmit(values: RegisterValues) {
        try {
            const submitData: any = {
                phone: values.phone,
                firstName: values.firstName,
                lastName: values.lastName,
                password: values.password,
                confirmPassword: values.confirmPassword,
                role: values.isCompany ? "Company" : "User"
            };

            // Добавляем данные компании только если регистрируемся как компания
            if (values.isCompany) {
                if (values.companyName) {
                    submitData.companyName = values.companyName;
                }
                if (values.inn) {
                    submitData.inn = values.inn;
                }
            }

            // Добавляем описание
            if (values.description) {
                submitData.description = values.description;
            }

            await register(submitData)
            router.push("/auth/login")
        } catch (error) {
            console.error(error)
            form.setError("root", { message: "Ошибка при регистрации. Возможно, номер уже занят." })
        }
    }

    return (
        <Card className="w-full max-w-md mx-auto">
            <CardHeader>
                <CardTitle className="text-2xl">Регистрация</CardTitle>
                <CardDescription>
                    Создайте аккаунт, чтобы начать пользоваться сервисом.
                </CardDescription>
            </CardHeader>
            <CardContent>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                        <div className="grid grid-cols-2 gap-4">
                            <FormField
                                control={form.control}
                                name="firstName"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Имя</FormLabel>
                                        <FormControl>
                                            <Input
                                                placeholder="Иван"
                                                value={field.value || ""}
                                                onChange={field.onChange}
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="lastName"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Фамилия</FormLabel>
                                        <FormControl>
                                            <Input
                                                placeholder="Иванов"
                                                value={field.value || ""}
                                                onChange={field.onChange}
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                        </div>

                        <FormField
                            control={form.control}
                            name="phone"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Телефон</FormLabel>
                                    <FormControl>
                                        <Input
                                            placeholder="+7 (999) 000-00-00"
                                            value={field.value || ""}
                                            onChange={field.onChange}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />

                        <FormField
                            control={form.control}
                            name="isCompany"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center gap-4 space-y-0 rounded-md border p-4">
                                    <FormControl>
                                        <Checkbox
                                            checked={field.value}
                                            onCheckedChange={field.onChange}
                                        />
                                    </FormControl>
                                    <FormLabel className="text-sm font-medium cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                                        Я представитель компании
                                    </FormLabel>
                                </FormItem>
                            )}
                        />

                        {isCompany && (
                            <>
                                <FormField
                                    control={form.control}
                                    name="companyName"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Название компании</FormLabel>
                                            <FormControl>
                                                <Input
                                                    placeholder="ООО 'Ромашка'"
                                                    value={field.value || ""}
                                                    onChange={field.onChange}
                                                />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="inn"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>ИНН</FormLabel>
                                            <FormControl>
                                                <Input
                                                    placeholder="1234567890"
                                                    maxLength={10}
                                                    value={field.value || ""}
                                                    onChange={field.onChange}
                                                />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </>
                        )}

                        <FormField
                            control={form.control}
                            name="description"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Описание (необязательно)</FormLabel>
                                    <FormControl>
                                        <RichTextEditor
                                            content={field.value || ""}
                                            onChange={field.onChange}
                                            placeholder={isCompany
                                                ? "Расскажите о вашей компании...\n\nВы можете использовать кнопки на панели для форматирования текста."
                                                : "Расскажите о себе и вашем опыте...\n\nВы можете использовать кнопки на панели для форматирования текста."
                                            }
                                            maxLength={2048}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />

                        <FormField
                            control={form.control}
                            name="password"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Пароль</FormLabel>
                                    <FormControl>
                                        <Input
                                            type="password"
                                            placeholder="******"
                                            value={field.value || ""}
                                            onChange={field.onChange}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="confirmPassword"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Подтвердите пароль</FormLabel>
                                    <FormControl>
                                        <Input
                                            type="password"
                                            placeholder="******"
                                            value={field.value || ""}
                                            onChange={field.onChange}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        {form.formState.errors.root && (
                            <p className="text-sm font-medium text-destructive">
                                {form.formState.errors.root.message}
                            </p>
                        )}
                        <Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700" disabled={isLoading}>
                            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                            Зарегистрироваться
                        </Button>
                    </form>
                </Form>
            </CardContent>
        </Card>
    )
}