smart-electronics-frontend/features/cart/components/OrderSummary.tsx

"use client";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Textarea } from "@/components/ui/textarea";
import { Separator } from "@/components/ui/separator";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import DeliveryTypeSelector from "./DeliveryTypeSelector";
import { useTranslations } from "next-intl";
import type { DeliveryType, PaymentType, Province } from "@/lib/types/api";
import { useState } from "react";

interface OrderBillingItem {
  title: string;
  value: string;
}

interface OrderBilling {
  body: OrderBillingItem[];
  footer: {
    title: string;
    value: string;
  };
}

interface OrderSummaryProps {
  order: {
    id: number;
    billing: OrderBilling;
  };
  paymentType: PaymentType | null;
  deliveryType: DeliveryType;
  selectedRegion: string;
  selectedProvince: number | null;
  note: string;
  regionGroups: Record<string, Province[]>;
  availableRegions: string[];
  paymentTypes: PaymentType[];
  phone: string;
  name: string;
  lastName: string;
  onPhoneChange: (phone: string) => void;
  onNameChange: (name: string) => void;
  onLastNameChange: (lastName: string) => void;
  onPaymentTypeChange: (type: PaymentType) => void;
  onDeliveryTypeChange: (type: DeliveryType) => void;
  onRegionChange: (regionCode: string) => void;
  onProvinceChange: (provinceId: number) => void;
  onNoteChange: (note: string) => void;
  onCompleteOrder: () => void;
  isLoading: boolean;
}

export default function OrderSummary({
  order,
  paymentType,
  deliveryType,
  selectedRegion,
  selectedProvince,
  note,
  regionGroups,
  availableRegions,
  paymentTypes,
  phone,
  name,
  lastName,
  onPhoneChange,
  onNameChange,
  onLastNameChange,
  onPaymentTypeChange,
  onDeliveryTypeChange,
  onRegionChange,
  onProvinceChange,
  onNoteChange,
  onCompleteOrder,
  isLoading,
}: OrderSummaryProps) {
  const t = useTranslations();
  const [showValidation, setShowValidation] = useState(false);

  const provincesForSelectedRegion = selectedRegion
    ? regionGroups[selectedRegion] || []
    : [];

  const phoneDigits = phone.replace(/\D/g, "");
  const isPhoneValid = phoneDigits.length === 11;

  const isFormValid =
    selectedRegion &&
    selectedProvince &&
    paymentType &&
    isPhoneValid &&
    name.trim() !== "" &&
    lastName.trim() !== "";

  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const input = e.target.value;
    const prefix = "+993 ";

    if (input.length < prefix.length) {
      onPhoneChange(prefix);
      return;
    }

    const digitsOnly = input.substring(prefix.length).replace(/\D/g, "");

    const limitedDigits = digitsOnly.substring(0, 8);

    let formattedPhone = prefix;
    if (limitedDigits.length > 0) {
      formattedPhone += limitedDigits.substring(0, 2);

      if (limitedDigits.length > 2) {
        formattedPhone += " " + limitedDigits.substring(2);
      }
    }

    onPhoneChange(formattedPhone);
  };

  const handleCompleteOrderClick = () => {
    setShowValidation(true);
    if (isFormValid) {
      onCompleteOrder();
    }
  };

  return (
    <Card className="w-full md:w-[380px] p-4 md:p-6 rounded-xl h-fit sticky top-20">
      {/* Customer Information */}
      <div className="mb-6">
        <h3 className="text-lg font-semibold mb-3">
          {t("customer_information")}
        </h3>
        <div className="space-y-5">
          <div>
            <Label className="text-sm font-medium mb-2 block">
              {t("name")}
            </Label>
            <Input
              type="text"
              value={name}
              onChange={(e) => onNameChange(e.target.value)}
              placeholder={t("name")}
              className={`rounded-lg ${
                showValidation && name.trim() === "" ? "border-red-500" : ""
              }`}
            />
            {showValidation && name.trim() === "" && (
              <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
            )}
          </div>
          <div>
            <Label className="text-sm font-medium mb-2 block">
              {t("last_name")}
            </Label>
            <Input
              type="text"
              value={lastName}
              onChange={(e) => onLastNameChange(e.target.value)}
              placeholder={t("last_name")}
              className={`rounded-lg ${
                showValidation && lastName.trim() === "" ? "border-red-500" : ""
              }`}
            />
            {showValidation && lastName.trim() === "" && (
              <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
            )}
          </div>
          <div>
            <Label className="text-sm font-medium mb-2 block">
              {t("phone")}
            </Label>
            <Input
              type="tel"
              value={phone}
              onChange={handlePhoneChange}
              placeholder="+993 61 097651"
              className={`rounded-lg ${
                showValidation && !isPhoneValid ? "border-red-500" : ""
              }`}
            />
            {showValidation && !isPhoneValid && (
              <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
            )}
          </div>
        </div>
      </div>

      {/* Region Selection */}
      <div className="mb-6">
        <Label className="text-lg font-semibold mb-3 block">
          {t("choose_region")}
        </Label>
        <RadioGroup
          value={selectedRegion}
          onValueChange={(value) => {
            onRegionChange(value);
            onProvinceChange(null as any);
          }}
          className="flex flex-wrap gap-4"
        >
          {availableRegions.map((regionCode) => (
            <div key={regionCode} className="flex items-center space-x-2">
              <RadioGroupItem
                value={regionCode}
                id={`region-${regionCode}`}
                className={`border-2 ${
                  showValidation && !selectedRegion
                    ? "border-red-500"
                    : "border-gray-400"
                } data-[state=checked]:border-[#005bff] data-[state=checked]:bg-white`}
              />
              <Label
                htmlFor={`region-${regionCode}`}
                className="cursor-pointer uppercase"
              >
                {regionCode}
              </Label>
            </div>
          ))}
        </RadioGroup>
        {showValidation && !selectedRegion && (
          <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
        )}
      </div>

      {/* Province Selection */}
      {selectedRegion && provincesForSelectedRegion.length > 0 && (
        <div className="mb-6">
          <Label className="text-lg font-semibold mb-3 block">
            {t("choose_address")}
          </Label>
          <Select
            value={selectedProvince?.toString() || ""}
            onValueChange={(value) => onProvinceChange(parseInt(value))}
          >
            <SelectTrigger
              className={`rounded-lg w-full ${
                showValidation && !selectedProvince ? "border-red-500" : ""
              }`}
            >
              <SelectValue placeholder={t("choose_address")} />
            </SelectTrigger>
            <SelectContent>
              {provincesForSelectedRegion.map((province) => (
                <SelectItem key={province.id} value={province.id.toString()}>
                  {province.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {showValidation && !selectedProvince && (
            <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
          )}
        </div>
      )}

      {/* Note */}
      <div className="mb-6">
        <Label className="text-lg font-semibold mb-3 block">{t("note")}</Label>
        <Textarea
          value={note}
          onChange={(e) => onNoteChange(e.target.value)}
          className="rounded-xl resize-none"
          rows={3}
          placeholder={t("note")}
        />
      </div>

      {/* Billing */}
      <div className="space-y-2 mb-4">
        {order.billing.body.map((item, index) => (
          <div
            key={index}
            className="flex justify-between text-base font-medium"
          >
            <span>{item.title}:</span>
            <span>{item.value}</span>
          </div>
        ))}
      </div>

      <Separator className="my-4" />

      <div className="flex justify-between items-center mb-6">
        <span className="text-lg font-semibold">
          {order.billing.footer.title}:
        </span>
        <span className="text-lg font-bold text-green-600">
          {order.billing.footer.value}
        </span>
      </div>

      <Button
        onClick={handleCompleteOrderClick}
        disabled={isLoading}
        className="w-full rounded-lg cursor-pointer bg-[#005bff] hover:bg-[#004dcc] h-12 text-lg font-bold disabled:opacity-50"
        size="lg"
      >
        {isLoading ? `${t("order")}...` : t("order")}
      </Button>
    </Card>
  );
}