"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { Check, LoaderIcon } from "lucide-react";
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { z } from "zod";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Field,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

const contactFormSchema = z.object({
  fullName: z.string().min(1, "نام و نام خانوادگی"),
  company: z.string().optional(),
  phone: z.string().min(1, "شماره تماس کاری"),
  email: z
    .string()
    .min(1, "ایمیل کاری")
    .email("ایمیل واردشده معتبر نیست"),
  country: z.string().optional(),
  companySize: z.string().optional(),
  referral: z.string().optional(),
});

type ContactFormData = z.infer<typeof contactFormSchema>;

interface Contact1Props {
  className?: string;
  onSubmit?: (data: ContactFormData) => Promise<void>;
}

const Contact1 = ({ className, onSubmit }: Contact1Props) => {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);

  const form = useForm<ContactFormData>({
    resolver: zodResolver(contactFormSchema),
    mode: "onSubmit",
    reValidateMode: "onSubmit",
    defaultValues: {
      fullName: "",
      company: "",
      phone: "",
      email: "",
      country: "",
      companySize: "",
      referral: "",
    },
  });

  const handleFormSubmit = async (data: ContactFormData) => {
    try {
      if (onSubmit) {
        await onSubmit(data);
      } else {
        console.log("Form submitted:", data);
        await new Promise((resolve) => setTimeout(resolve, 1000));
      }
      setIsSubmitted(true);
      setShowSuccess(true);
      form.reset();
      setTimeout(() => setShowSuccess(false), 4500);
      setTimeout(() => setIsSubmitted(false), 5000);
    } catch {
      form.setError("root", {
        message: "ثبت درخواست ناموفق بود. دوباره تلاش کنید.",
      });
    }
  };

  return (
    <section dir="rtl" lang="fa" className={cn("relative py-32", className)}>
      <div className="pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(ellipse_35%_15%_at_40%_55%,hsl(var(--accent))_0%,transparent_100%)] lg:bg-[radial-gradient(ellipse_12%_20%_at_60%_45%,hsl(var(--accent))_0%,transparent_100%)]"></div>
      <div className="pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(ellipse_35%_20%_at_70%_75%,hsl(var(--accent))_0%,transparent_80%)] lg:bg-[radial-gradient(ellipse_15%_30%_at_70%_65%,hsl(var(--accent))_0%,transparent_80%)]"></div>
      <div className="pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(hsl(var(--accent-foreground)/0.1)_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_60%_at_65%_50%,#000_0%,transparent_80%)] [background-size:8px_8px]"></div>
      <div className="container grid w-full grid-cols-1 gap-x-32 overflow-hidden lg:grid-cols-2">
        <div className="w-full pb-10 md:space-y-10 md:pb-0">
          <div className="space-y-4 md:max-w-[40rem]">
            <h1 className="text-xl font-medium lg:text-2xll">
              دموی شخصی‌سازی‌شده سامانه مدیریت ارتباط با مشتری
                                      </h1>
            <div className="text-muted-foreground md:text-base lg:text-lg lg:leading-7">
              در یک جلسه کوتاه، قیف فروش، اتوماسیون پیگیری و داشبورد تیم را روی سناریوی کسب‌وکارتان می‌بینید. کارشناسان فروش به پرسش‌های فنی و تجاری‌تان پاسخ می‌دهند.
                                      </div>
          </div>
          <div className="hidden md:block">
            <div className="space-y-16 pb-20 lg:pb-0">
              <div className="space-y-6">
                <div className="mt-16 flex overflow-hidden">
                  <Avatar className="size-11 border border-border">
                    <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
                    <AvatarFallback>SB</AvatarFallback>
                  </Avatar>
                  <Avatar className="-ms-4 size-11 border border-border">
                    <AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
                    <AvatarFallback>RA</AvatarFallback>
                  </Avatar>
                  <Avatar className="-ms-4 size-11 border border-border">
                    <AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
                    <AvatarFallback>JS</AvatarFallback>
                  </Avatar>
                </div>
                <div className="space-y-4">
                  <p className="text-sm font-semibold">
                    در این دمو چه می‌بینید؟
                                                        </p>
                  <div className="flex items-center gap-2.5">
                    <Check className="size-5 shrink-0 text-muted-foreground" />
                    <p className="text-sm">
                      نگاشت قیف فروش و مراحل پیگیری سرنخ
                                                              </p>
                  </div>
                  <div className="flex items-center gap-2.5">
                    <Check className="size-5 shrink-0 text-muted-foreground" />
                    <p className="text-sm">
                      پیشنهاد استقرار سامانه مدیریت ارتباط با مشتری متناسب با اندازه تیم
                                                              </p>
                  </div>
                  <div className="flex items-center gap-2.5">
                    <Check className="size-5 shrink-0 text-muted-foreground" />
                    <p className="text-sm">پاسخ به پرسش‌های یکپارچه‌سازی و گزارش‌گیری</p>
                  </div>
                </div>
              </div>
              <div className="flex items-center gap-12">
                <img
                  src="/block-media/shadcnblocks/block/logos/astro-wordmark.svg"
                  alt="لوگوی Astro"
                  className="h-6 dark:invert"
                />
                <img
                  src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
                  alt="لوگوی shadcn/ui"
                  className="h-5 dark:invert"
                />
              </div>
            </div>
          </div>
        </div>
        <div className="flex w-full justify-center lg:mt-2.5">
          <div className="relative flex w-full max-w-[30rem] min-w-[20rem] flex-col items-center overflow-visible md:min-w-[24rem]">
            <form
              onSubmit={form.handleSubmit(handleFormSubmit)}
              className="z-10 w-full"
            >
              <div className="w-full rounded-xl border border-border bg-card px-6 py-8 shadow-sm">
                {isSubmitted && (
                  <div
                    className={cn(
                      "mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
                      showSuccess ? "opacity-100" : "opacity-0",
                    )}
                  >
                    <p className="text-sm font-medium text-green-600 dark:text-green-400">
                      درخواست دمو ثبت شد. کارشناس فروش در کمتر از یک روز کاری با شما هماهنگ می‌کند.
                                                              </p>
                  </div>
                )}

                <FieldGroup className="gap-6">
                  <Controller
                    control={form.control}
                    name="fullName"
                    render={({ field, fieldState }) => (
                      <Field data-invalid={fieldState.invalid}>
                        <FieldLabel htmlFor={field.name}>
                          نام و نام خانوادگی{" "}
                          <span className="text-destructive">*</span>
                        </FieldLabel>
                        <Input
                          {...field}
                          id={field.name}
                          aria-invalid={fieldState.invalid}
                          placeholder="علی محمدی"
                        />
                        {fieldState.invalid && (
                          <FieldError errors={[fieldState.error]} />
                        )}
                      </Field>
                    )}
                  />

                  <Controller
                    control={form.control}
                    name="company"
                    render={({ field }) => (
                      <Field>
                        <FieldLabel htmlFor={field.name}>شرکت</FieldLabel>
                        <Input
                          {...field}
                          id={field.name}
                          placeholder="نام شرکت"
                        />
                      </Field>
                    )}
                  />

                  <Controller
                    control={form.control}
                    name="phone"
                    render={({ field, fieldState }) => (
                      <Field data-invalid={fieldState.invalid}>
                        <FieldLabel htmlFor={field.name}>
                          تلفن همراه{" "}
                          <span className="text-destructive">*</span>
                        </FieldLabel>
                        <Input
                          {...field}
                          id={field.name}
                          aria-invalid={fieldState.invalid}
                          placeholder="۰۹۱۲ ۳۴۵ ۶۷۸۹"
                          dir="rtl"
                          className="text-start"
                        />
                        {fieldState.invalid && (
                          <FieldError errors={[fieldState.error]} />
                        )}
                      </Field>
                    )}
                  />

                  <Controller
                    control={form.control}
                    name="email"
                    render={({ field, fieldState }) => (
                      <Field data-invalid={fieldState.invalid}>
                        <FieldLabel htmlFor={field.name}>
                          ایمیل کاری{" "}
                          <span className="text-destructive">*</span>
                        </FieldLabel>
                        <Input
                          {...field}
                          id={field.name}
                          type="email"
                          aria-invalid={fieldState.invalid}
                          placeholder="example@company.com"
                          dir="rtl"
                          className="text-start"
                        />
                        {fieldState.invalid && (
                          <FieldError errors={[fieldState.error]} />
                        )}
                      </Field>
                    )}
                  />

                  <Controller
                    control={form.control}
                    name="country"
                    render={({ field }) => (
                      <Field>
                        <FieldLabel htmlFor={field.name}>کشور</FieldLabel>
                        <Select
                          onValueChange={field.onChange}
                          value={field.value}
                        >
                          <SelectTrigger id={field.name} className="w-full">
                            <SelectValue placeholder="انتخاب کشور" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="ir">ایران</SelectItem>
                            <SelectItem value="aus">استرالیا</SelectItem>
                            <SelectItem value="usa">
                              ایالات متحده
                            </SelectItem>
                            <SelectItem value="uk">بریتانیا</SelectItem>
                            <SelectItem value="ca">کانادا</SelectItem>
                            <SelectItem value="de">آلمان</SelectItem>
                            <SelectItem value="fr">فرانسه</SelectItem>
                            <SelectItem value="it">ایتالیا</SelectItem>
                            <SelectItem value="es">اسپانیا</SelectItem>
                            <SelectItem value="nl">هلند</SelectItem>
                          </SelectContent>
                        </Select>
                      </Field>
                    )}
                  />

                  <Controller
                    control={form.control}
                    name="companySize"
                    render={({ field }) => (
                      <Field>
                        <FieldLabel htmlFor={field.name}>
                          اندازه تیم فروش
                        </FieldLabel>
                        <Select
                          onValueChange={field.onChange}
                          value={field.value}
                        >
                          <SelectTrigger id={field.name} className="w-full">
                            <SelectValue placeholder="۱–۱۰ نفر" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="1-10">۱–۱۰ نفر</SelectItem>
                            <SelectItem value="11-50">۱۱–۵۰ نفر</SelectItem>
                            <SelectItem value="51-200">۵۱–۲۰۰ نفر</SelectItem>
                            <SelectItem value="200+">بیش از ۲۰۰ نفر</SelectItem>
                          </SelectContent>
                        </Select>
                      </Field>
                    )}
                  />

                  <Controller
                    control={form.control}
                    name="referral"
                    render={({ field }) => (
                      <Field>
                        <FieldLabel htmlFor={field.name}>
                          از کجا با پلتفرم آشنا شدید؟
                        </FieldLabel>
                        <Select
                          onValueChange={field.onChange}
                          value={field.value}
                        >
                          <SelectTrigger id={field.name} className="w-full">
                            <SelectValue placeholder="جستجو در گوگل" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="search">جستجو در گوگل</SelectItem>
                            <SelectItem value="social">
                              شبکه‌های اجتماعی
                            </SelectItem>
                            <SelectItem value="email">ایمیل مارکتینگ</SelectItem>
                            <SelectItem value="referral">معرفی همکار یا مشتری</SelectItem>
                            <SelectItem value="other">سایر</SelectItem>
                          </SelectContent>
                        </Select>
                      </Field>
                    )}
                  />

                  {form.formState.errors.root && (
                    <p className="text-sm text-destructive">
                      {form.formState.errors.root.message}
                    </p>
                  )}

                  <div className="flex w-full flex-col justify-end space-y-3 pt-2">
                    <Button
                      type="submit"
                      disabled={form.formState.isSubmitting}
                      className="gap-2"
                    >
                      {form.formState.isSubmitting ? (
                        <>
                          <LoaderIcon className="size-4 animate-spin" />
                          در حال ثبت درخواست...
                        </>
                      ) : (
                        "درخواست دمو"
                      )}
                    </Button>
                    <div className="text-xs text-muted-foreground">
                      با ارسال این فرم، نحوه پردازش داده‌های تماس در{" "}
                      <a href="#" className="underline">
                        سیاست حریم خصوصی
                      </a>{" "}
                      را می‌پذیرید.
                                                              </div>
                  </div>
                </FieldGroup>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Contact1 };