"use client";

import { AlignLeft, Globe, Mail, MapPin, Phone, Plus } from "lucide-react";
import { useRef, useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

interface CompaniesCreate4Props {
  className?: string;
}

const CompaniesCreate4 = ({ className }: CompaniesCreate4Props) => {
  const [formData, setFormData] = useState<Record<string, string>>({});
  const [logo, setLogo] = useState<File | null>(null);
  const logoInputRef = useRef<HTMLInputElement>(null);

  const FIELDS = [
    {
      label: "معرفی شرکت",
      name: "description",
      placeholder: "معرفی کوتاهی از فعالیت‌ها، محصولات و خدمات شرکت بنویسید...",
      icon: AlignLeft,
      type: "text",
    },
    {
      label: "ایمیل",
      name: "email",
      type: "email",
      placeholder: "info@example.ir",
      icon: Mail,
      required: true,
    },
    {
      label: "تلفن",
      name: "phone",
      type: "tel",
      placeholder: "۰۹۱۲ ۳۴۵ ۶۷۸۹",
      icon: Phone,
    },
    {
      label: "آدرس",
      name: "address",
      type: "text",
      placeholder: "تهران، خیابان ولیعصر، پلاک ۱۲",
      icon: MapPin,
    },
    {
      label: "وب‌سایت",
      name: "website",
      type: "url",
      placeholder: "https://example.ir",
      icon: Globe,
    },
  ];

  const handleInputChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  return (
    <section className="py-32">
      <div className="container flex justify-center">
        <Dialog>
          <DialogTrigger asChild>
            <Button>ثبت شرکت</Button>
          </DialogTrigger>
          <DialogContent
            showCloseButton={false}
            className={cn(
              "w-full rounded-lg bg-background p-0 sm:max-w-md",
              className,
            )}
          >
            <DialogTitle className="hidden">ثبت شرکت</DialogTitle>
            <form autoComplete="off" onSubmit={(e) => e.preventDefault()}>
              <div className="flex flex-col gap-4 p-4 !pb-0 sm:flex-row sm:items-center">
                <input
                  ref={logoInputRef}
                  type="file"
                  className="hidden"
                  accept="image/*"
                  onChange={(e) => setLogo(e.target.files?.[0] || null)}
                />
                <div
                  role="input"
                  tabIndex={0}
                  onClick={() => logoInputRef.current?.click()}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" || e.key === " ") {
                      logoInputRef.current?.click();
                    }
                  }}
                  className="flex size-26 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border text-muted-foreground sm:size-16"
                >
                  {!logo ? (
                    <Plus className="size-8 sm:size-6" />
                  ) : (
                    <img
                      src={URL.createObjectURL(logo)}
                      alt="لوگوی شرکت"
                      className="size-full object-cover"
                    />
                  )}
                </div>
                <Input
                  type="text"
                  name="name"
                  placeholder="نام رسمی شرکت"
                  onChange={(e) => handleInputChange("name", e.target.value)}
                  required
                  className={cn(
                    "h-auto rounded-none border-x-0 border-t-0 !bg-transparent p-0 py-1.5 shadow-none !ring-0 !outline-none focus:border-b sm:border-b-transparent sm:!text-xl sm:focus:!border-input/70",
                  )}
                />
              </div>
              <div className="flex flex-col gap-4 p-4">
                {FIELDS.map((field, i) => {
                  return (
                    <div
                      key={`companies-create-1-field-${i}-${field.label}`}
                      className="relative grid w-full gap-1"
                    >
                      <div className="flex h-full items-center gap-2 text-foreground/80">
                        <field.icon className="size-4 shrink-0" />
                        <Label
                          htmlFor={field.name}
                          className={cn(
                            "min-w-0 truncate leading-loose",
                            field.required &&
                              "after:ms-1 after:text-destructive after:content-['*']",
                          )}
                        >
                          {field.label}
                        </Label>
                      </div>

                      <div className="shrink-0">
                        <Input
                          name={field.name}
                          placeholder={field.placeholder}
                          value={formData[field.name] || ""}
                          onChange={(e) =>
                            handleInputChange(field.name, e.target.value)
                          }
                          type={field.type}
                          required={field.required}
                          className={cn(
                            "h-auto rounded-none border-x-0 border-t-0 !bg-transparent p-0 py-1.5 shadow-none !ring-0 !outline-none focus:border-b sm:border-b-transparent sm:focus:!border-input/70",
                          )}
                        />
                      </div>
                    </div>
                  );
                })}
              </div>
              <div className="flex w-full p-4 sm:justify-end sm:border-t">
                <Button type="submit">ایجاد پروفایل</Button>
              </div>
            </form>
          </DialogContent>
        </Dialog>
      </div>
    </section>
  );
};

export { CompaniesCreate4 };