edr-platform/apps/edr-freight-web/portal/src/pages/customers/NewCustomerPage.tsx

import type { ReactNode } from "react";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";

import {
  Building2,
  Mail,
  Phone,
  User,
  Globe,
  MapPin,
  FileText,
} from "lucide-react";

export interface CustomerFormData {
  companyName?: string;
  customerType?: string;
  contactPerson?: string;
  email?: string;
  phone?: string;
  tinNumber?: string;
  city?: string;
  country?: string;
  address?: string;
  notes?: string;
}

export interface NewCustomerPageProps {
  mode?: "create" | "edit";
  customer?: CustomerFormData;
  children?: ReactNode;
}

export default function NewCustomerPage({
  mode = "create",
  customer,
  children,
}: NewCustomerPageProps = {}) {
  const isEdit = mode === "edit";
  const title = isEdit ? "Edit Customer" : "New Customer";
  const description = isEdit
    ? "Update existing customer information."
    : "Create and manage customer information.";
  const submitLabel = isEdit ? "Save Changes" : "Create Customer";

  return (
    <Dialog>
      <DialogTrigger asChild>
        {children ?? <Button>{isEdit ? "Edit" : "New Customer"}</Button>}
      </DialogTrigger>

      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-3xl rounded-3xl">
        <DialogHeader>
          <DialogTitle className="text-2xl font-bold">{title}</DialogTitle>

          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>

        <div className="grid gap-5 py-4 md:grid-cols-2">
          {/* Company Name */}
          <div className="space-y-2">
            <Label>Company Name *</Label>

            <div className="relative">
              <Building2 className="absolute left-3 top-3.5 h-4 w-4 text-muted-foreground" />

              <Input
                defaultValue={customer?.companyName ?? ""}
                placeholder="Enter company name"
                className="pl-10"
              />
            </div>
          </div>

          {/* Customer Type */}
          <div className="space-y-2">
            <Label>Customer Type *</Label>

            <select
              defaultValue={customer?.customerType ?? "Importer"}
              className="flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 shadow-xs outline-none transition hover:border-slate-300 focus:border-[#33578D]/50 focus:ring-2 focus:ring-[#33578D]/20"
            >
              <option>Importer</option>
              <option>Exporter</option>
              <option>Supplier</option>
            </select>
          </div>

          {/* Contact Person */}
          <div className="space-y-2">
            <Label>Contact Person</Label>

            <div className="relative">
              <User className="absolute left-3 top-3.5 h-4 w-4 text-muted-foreground" />

              <Input
                defaultValue={customer?.contactPerson ?? ""}
                placeholder="Enter contact person"
                className="pl-10"
              />
            </div>
          </div>

          {/* Email */}
          <div className="space-y-2">
            <Label>Email *</Label>

            <div className="relative">
              <Mail className="absolute left-3 top-3.5 h-4 w-4 text-muted-foreground" />

              <Input
                type="email"
                defaultValue={customer?.email ?? ""}
                placeholder="Enter email"
                className="pl-10"
              />
            </div>
          </div>

          {/* Phone */}
          <div className="space-y-2">
            <Label>Phone</Label>

            <div className="relative">
              <Phone className="absolute left-3 top-3.5 h-4 w-4 text-muted-foreground" />

              <Input
                defaultValue={customer?.phone ?? ""}
                placeholder="Enter phone"
                className="pl-10"
              />
            </div>
          </div>

          {/* TIN */}
          <div className="space-y-2">
            <Label>TIN Number</Label>

            <div className="relative">
              <FileText className="absolute left-3 top-3.5 h-4 w-4 text-muted-foreground" />

              <Input
                defaultValue={customer?.tinNumber ?? ""}
                placeholder="Enter TIN number"
                className="pl-10"
              />
            </div>
          </div>

          {/* City */}
          <div className="space-y-2">
            <Label>City</Label>

            <div className="relative">
              <MapPin className="absolute left-3 top-3.5 h-4 w-4 text-muted-foreground" />

              <Input
                defaultValue={customer?.city ?? ""}
                placeholder="Enter city"
                className="pl-10"
              />
            </div>
          </div>

          {/* Country */}
          <div className="space-y-2">
            <Label>Country</Label>

            <div className="relative">
              <Globe className="absolute left-3 top-3.5 h-4 w-4 text-muted-foreground" />

              <Input
                defaultValue={customer?.country ?? ""}
                placeholder="Enter country"
                className="pl-10"
              />
            </div>
          </div>

          {/* Address */}
          <div className="space-y-2 md:col-span-2">
            <Label>Address</Label>

            <Textarea
              defaultValue={customer?.address ?? ""}
              placeholder="Enter address"
            />
          </div>

          {/* Notes */}
          <div className="space-y-2 md:col-span-2">
            <Label>Notes</Label>

            <Textarea
              defaultValue={customer?.notes ?? ""}
              placeholder="Additional notes..."
            />
          </div>
        </div>

        <div className="flex justify-end gap-3">
          <Button variant="outline">Cancel</Button>

          <Button className="bg-[#33578D] text-white hover:bg-[#33578D]/90">
            {submitLabel}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}