gastro-bot/src/features/about/ui/AboutPage.tsx

'use client';

import formatPhone from '@/shared/lib/formatPhone';
import { Button } from '@/shared/ui/button';
import { Card } from '@/shared/ui/card';
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/shared/ui/form';
import { Input } from '@/shared/ui/input';
import { Label } from '@/shared/ui/label';
import { zodResolver } from '@hookform/resolvers/zod';
import { Upload } from 'lucide-react';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import * as z from 'zod';

const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const ACCEPTED_FILE_TYPES = [
  'application/pdf',
  'application/msword',
  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
];

const partnershipFormSchema = z.object({
  companyName: z.string().min(2, {
    message: "Kompaniya nomi kamida 2 ta belgidan iborat bo'lishi kerak",
  }),
  website: z
    .string()
    .url({ message: "To'g'ri website manzilini kiriting" })
    .optional()
    .or(z.literal('')),
  contactPerson: z
    .string()
    .min(2, { message: "Ism kamida 2 ta belgidan iborat bo'lishi kerak" }),
  email: z
    .string()
    .email({ message: "To'g'ri email manzilini kiriting" })
    .optional(),
  phone: z
    .string()
    .min(9, { message: "To'g'ri telefon raqamini kiriting" })
    .regex(/^[\d\s+\-$$$$]+$/, {
      message: "Telefon raqami faqat raqamlardan iborat bo'lishi kerak",
    }),
  companyFile: z
    .custom<FileList>()
    .refine((files) => files?.length === 1, 'File yuklash majburiy')
    .refine(
      (files) => files?.[0]?.size <= MAX_FILE_SIZE,
      'File hajmi 5MB dan oshmasligi kerak',
    )
    .refine(
      (files) => ACCEPTED_FILE_TYPES.includes(files?.[0]?.type),
      'Faqat PDF yoki Word formatidagi fayllar qabul qilinadi',
    ),
});

type PartnershipFormValues = z.infer<typeof partnershipFormSchema>;

export function PartnershipForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const form = useForm<PartnershipFormValues>({
    resolver: zodResolver(partnershipFormSchema),
    defaultValues: {
      companyName: '',
      website: '',
      contactPerson: '',
      email: '',
      phone: '+998',
    },
  });

  async function onSubmit(data: PartnershipFormValues) {
    console.log(data);

    setIsSubmitting(true);

    try {
      await new Promise((resolve) => setTimeout(resolve, 2000));

      toast.success("So'rov yuborildi!", {
        richColors: true,
        position: 'top-center',
      });

      form.reset();
    } catch {
      toast.error('Xatolik yuz berdi', {
        richColors: true,
        position: 'top-center',
      });
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <section className="px-4 mb-5">
      <div className="max-w-3xl mx-auto">
        <div className="text-center mb-5">
          <h2 className="text-2xl md:text-5xl font-bold mb-2 text-balance">
            {`Hamkor bo'ling`}
          </h2>
          <p className="text-md text-muted-foreground leading-relaxed">
            {`Gastro Market bilan hamkorlik qilishni xohlaysizmi? Quyidagi formani
            to'ldiring va biz siz bilan tez orada bog'lanamiz.`}
          </p>
        </div>

        <Card className="p-8 md:p-12">
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
              <FormField
                control={form.control}
                name="companyName"
                render={({ field }) => (
                  <FormItem>
                    <Label>Kompaniya nomi</Label>
                    <FormControl>
                      <Input
                        placeholder="Kompaniyangiz nomini kiriting"
                        {...field}
                        className="h-12"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="website"
                render={({ field }) => (
                  <FormItem>
                    <Label>Website</Label>
                    <FormControl>
                      <Input
                        placeholder="https://example.com"
                        type="url"
                        className="h-12"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="contactPerson"
                render={({ field }) => (
                  <FormItem>
                    <Label>Ism Familiya</Label>
                    <FormControl>
                      <Input
                        placeholder="Ism va familiya"
                        className="h-12"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <div className="grid md:grid-cols-2 gap-6">
                <FormField
                  control={form.control}
                  name="email"
                  render={({ field }) => (
                    <FormItem className="flex flex-col justify-start">
                      <Label>Email</Label>
                      <FormControl>
                        <Input
                          placeholder="example@email.com"
                          type="email"
                          className="h-12"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="phone"
                  render={({ field }) => (
                    <FormItem className="flex flex-col justify-start">
                      <Label>Telefon raqami</Label>
                      <FormControl>
                        <Input
                          placeholder="+998 90 123 45 67"
                          className="h-12"
                          {...field}
                          value={formatPhone(field.value)}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <FormField
                control={form.control}
                name="companyFile"
                render={({ field: { onChange, value, ...field } }) => (
                  <FormItem>
                    <Label>Kompaniya hujjati</Label>
                    <FormControl>
                      <div>
                        <Input
                          type="file"
                          id="company file"
                          accept=".pdf,.doc,.docx"
                          onChange={(e) => {
                            const files = e.target.files;
                            onChange(files);
                          }}
                          {...field}
                          className="hidden"
                        />
                        <FormLabel
                          className="w-full flex justify-center items-center flex-col h-36 border border-gray-200 rounded-2xl cursor-pointer"
                          htmlFor="company file"
                        >
                          <Upload className="size-10 text-muted-foreground" />
                          <p className="text-muted-foreground text-lg">
                            Faylni tanlang
                          </p>
                          {value && value.length > 0 && (
                            <p className="mt-2 text-sm text-gray-500">
                              Tanlangan fayl: {value[0].name}
                            </p>
                          )}
                        </FormLabel>
                      </div>
                    </FormControl>
                    <FormDescription>
                      PDF yoki Word formatida (maksimal 5MB)
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <Button
                type="submit"
                size="lg"
                className="w-full"
                disabled={isSubmitting}
              >
                {isSubmitting ? 'Yuborilmoqda...' : "So'rov yuborish"}
              </Button>
            </form>
          </Form>
        </Card>
      </div>
    </section>
  );
}