"use client";

import React, { useState } from "react";
import { useModal } from "@/hooks/useModal";
import { Modal } from "@/components/ui/modal";
import Button from "@/components/ui/button/Button";
import Input from "@/components/form/input/InputField";
import Label from "@/components/form/Label";
import { formatProfileDate } from "@/lib/profileDateDisplay";
import {
  formatDateOfBirthInput,
  getDateOfBirthValidationMessage,
  parseDateOfBirthInput,
} from "@/modules/authModule/signup-set-password/formLogic";
import toast from "react-hot-toast";

function formatDateForEdit(value?: string): string {
  const trimmedValue = value?.trim() || "";
  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(trimmedValue);
  if (match) {
    const [, year, month, day] = match;
    return `${day}/${month}/${year}`;
  }

  return "";
}

interface UserInfoCardProps {
  readonly user: any;
  readonly onSave: (updatedInfo: {
    firstname: string;
    lastname: string;
    profile: {
      basic_information?: {
        date_of_birth?: string;
        place_of_birth?: string;
      };
    };
  }) => Promise<boolean>;
  readonly isSaving: boolean;
}

export default function UserInfoCard({ user, onSave, isSaving }: UserInfoCardProps) {
  const { isOpen, openModal, closeModal } = useModal();
  const basic = user.profile?.basic_information || {};

  const [form, setForm] = useState({
    firstname: user.firstname || "",
    lastname: user.lastname || "",
    date_of_birth: formatDateForEdit(basic.date_of_birth),
    place_of_birth: basic.place_of_birth || "",
  });

  const handleOpenModal = () => {
    setForm({
      firstname: user.firstname || "",
      lastname: user.lastname || "",
      date_of_birth: formatDateForEdit(user.profile?.basic_information?.date_of_birth),
      place_of_birth: user.profile?.basic_information?.place_of_birth || "",
    });
    openModal();
  };

  const handleInputChange = (field: keyof typeof form, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }));
  };

  const handleSave = async () => {
    const dateOfBirthInput = form.date_of_birth.trim();
    const dateOfBirth = dateOfBirthInput ? parseDateOfBirthInput(dateOfBirthInput) : "";

    if (dateOfBirthInput && !dateOfBirth) {
      toast.error(getDateOfBirthValidationMessage(dateOfBirthInput));
      return;
    }

    const saved = await onSave({
      firstname: form.firstname,
      lastname: form.lastname,
      profile: {
        basic_information: {
          date_of_birth: dateOfBirth,
          place_of_birth: form.place_of_birth,
        },
      },
    });
    if (saved) closeModal();
  };

  return (
    <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
      <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
        <div>
          <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-6">
            Personal Information
          </h4>

          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-7">
            <div>
              <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">First Name</p>
              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
                {user.firstname}
              </p>
            </div>
            <div>
              <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">Last Name</p>
              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
                {user.lastname}
              </p>
            </div>
            <div>
              <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">Date of Birth</p>
              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
                {formatProfileDate(basic.date_of_birth)}
              </p>
            </div>
            <div>
              <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">Place of Birth</p>
              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
                {basic.place_of_birth || "-"}
              </p>
            </div>
          </div>
        </div>

        <button onClick={handleOpenModal} className="edit-button-style dark:text-white/90">
          Edit
        </button>
      </div>

      <Modal isOpen={isOpen} onClose={closeModal} className="max-w-[700px] m-4">
        <div className="p-4 lg:p-11 rounded-3xl bg-white dark:bg-gray-900">
          <h4 className="text-2xl font-semibold mb-2 text-gray-800 dark:text-white/90">
            Edit Personal Info
          </h4>
          <form className="flex flex-col gap-5" onSubmit={(event) => event.preventDefault()}>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div>
                <Label>First Name</Label>
                <Input
                  type="text"
                  value={form.firstname}
                  disabled={isSaving}
                  onChange={(e) => handleInputChange("firstname", e.target.value)}
                />
              </div>
              <div>
                <Label>Last Name</Label>
                <Input
                  type="text"
                  value={form.lastname}
                  disabled={isSaving}
                  onChange={(e) => handleInputChange("lastname", e.target.value)}
                />
              </div>
              <div>
                <Label>Date of Birth</Label>
                <Input
                  type="text"
                  value={form.date_of_birth}
                  disabled={isSaving}
                  placeholder="DD/MM/YYYY"
                  inputMode="numeric"
                  maxLength={10}
                  onChange={(e) =>
                    handleInputChange("date_of_birth", formatDateOfBirthInput(e.target.value))
                  }
                />
                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">Format: DD/MM/YYYY</p>
              </div>
              <div>
                <Label>Place of Birth</Label>
                <Input
                  type="text"
                  value={form.place_of_birth}
                  disabled={isSaving}
                  onChange={(e) => handleInputChange("place_of_birth", e.target.value)}
                />
              </div>
            </div>
            <div className="flex justify-end gap-3 mt-4">
              <Button
                type="button"
                size="sm"
                variant="outline"
                onClick={closeModal}
                disabled={isSaving}
              >
                Close
              </Button>
              <Button type="button" size="sm" onClick={handleSave} disabled={isSaving}>
                {isSaving ? "Saving..." : "Save Changes"}
              </Button>
            </div>
          </form>
        </div>
      </Modal>
    </div>
  );
}