"use client";

import { useActionState } from "react";
import { updateProfileAction, changePasswordAction, updateShippingAction } from "@/lib/actions/auth";
import { User, Phone, Lock, CheckCircle, AlertCircle, MapPin } from "lucide-react";

type UserData = {
  id: string;
  name: string;
  email: string;
  phone: string | null;
  role: string;
  emailVerified: Date | null;
  createdAt: Date;
  shippingAddress: string | null;
  shippingCity: string | null;
  shippingState: string | null;
  shippingZip: string | null;
  shippingCountry: string | null;
};

export default function ProfileForms({ user }: { user: UserData }) {
  const [profileState, profileAction, profilePending] = useActionState(updateProfileAction, {});
  const [pwState, pwAction, pwPending] = useActionState(changePasswordAction, {});
  const [shippingState, shippingAction, shippingPending] = useActionState(updateShippingAction, {});

  const roleBadge: Record<string, string> = {
    admin: "Admin",
    journal_subscriber: "Journal Subscriber",
    job_seeker: "Job Seeker",
    registered: "Registered",
    guest: "Guest",
  };

  return (
    <div className="space-y-6">
      {/* Account Info Card */}
      <div className="bg-white rounded-2xl border border-neutral-200 p-6">
        <div className="flex items-center gap-4 mb-6">
          <div className="w-14 h-14 bg-navy-100 rounded-full flex items-center justify-center">
            <User size={24} className="text-navy-600" />
          </div>
          <div>
            <div className="font-semibold text-navy-800">{user.name}</div>
            <div className="text-sm text-neutral-500">{user.email}</div>
            <div className="flex items-center gap-2 mt-1">
              <span className="text-xs bg-navy-100 text-navy-700 px-2 py-0.5 rounded-full font-medium">
                {roleBadge[user.role] ?? user.role}
              </span>
              {user.emailVerified ? (
                <span className="flex items-center gap-1 text-xs text-emerald-600">
                  <CheckCircle size={11} /> Verified
                </span>
              ) : (
                <span className="flex items-center gap-1 text-xs text-amber-600">
                  <AlertCircle size={11} /> Email not verified
                </span>
              )}
            </div>
          </div>
        </div>

        {/* Profile Update Form */}
        <form action={profileAction} className="space-y-4">
          {profileState?.success && (
            <div className="p-3 bg-emerald-50 border border-emerald-100 text-emerald-700 text-sm rounded-lg">
              {profileState.success}
            </div>
          )}
          {profileState?.error && (
            <div className="p-3 bg-red-50 border border-red-100 text-red-600 text-sm rounded-lg">
              {profileState.error}
            </div>
          )}

          <div className="grid sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-neutral-700 mb-1.5">Full name</label>
              <div className="relative">
                <User size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400" />
                <input
                  name="name"
                  type="text"
                  defaultValue={user.name}
                  required
                  className="w-full pl-9 pr-4 py-2.5 border border-neutral-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-transparent"
                />
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium text-neutral-700 mb-1.5">Phone number</label>
              <div className="relative">
                <Phone size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400" />
                <input
                  name="phone"
                  type="tel"
                  defaultValue={user.phone ?? ""}
                  className="w-full pl-9 pr-4 py-2.5 border border-neutral-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-transparent"
                  placeholder="+60 12-345 6789"
                />
              </div>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-neutral-700 mb-1.5">Email address</label>
            <input
              type="email"
              value={user.email}
              disabled
              className="w-full px-4 py-2.5 border border-neutral-200 rounded-xl text-sm bg-neutral-50 text-neutral-400 cursor-not-allowed"
            />
            <p className="text-xs text-neutral-400 mt-1">Email cannot be changed. Contact support if needed.</p>
          </div>

          <div className="flex justify-end">
            <button
              type="submit"
              disabled={profilePending}
              className="px-6 py-2.5 bg-navy-700 hover:bg-navy-800 text-white font-semibold text-sm rounded-xl transition-colors disabled:opacity-60"
            >
              {profilePending ? "Saving…" : "Save Changes"}
            </button>
          </div>
        </form>
      </div>

      {/* Shipping Details Card */}
      <div className="bg-white rounded-2xl border border-neutral-200 p-6">
        <h2 className="font-semibold text-navy-800 mb-5 flex items-center gap-2">
          <MapPin size={16} className="text-neutral-500" /> Shipping Address
        </h2>

        <form action={shippingAction} className="space-y-4">
          {shippingState?.success && (
            <div className="p-3 bg-emerald-50 border border-emerald-100 text-emerald-700 text-sm rounded-lg">
              {shippingState.success}
            </div>
          )}
          {shippingState?.error && (
            <div className="p-3 bg-red-50 border border-red-100 text-red-600 text-sm rounded-lg">
              {shippingState.error}
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-neutral-700 mb-1.5">Street address</label>
            <input
              name="shippingAddress"
              type="text"
              defaultValue={user.shippingAddress ?? ""}
              className="w-full px-4 py-2.5 border border-neutral-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-transparent"
              placeholder="123 Main Street, Apt 4B"
            />
          </div>

          <div className="grid sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-neutral-700 mb-1.5">City</label>
              <input
                name="shippingCity"
                type="text"
                defaultValue={user.shippingCity ?? ""}
                className="w-full px-4 py-2.5 border border-neutral-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-transparent"
                placeholder="Kuala Lumpur"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-neutral-700 mb-1.5">State/Province</label>
              <input
                name="shippingState"
                type="text"
                defaultValue={user.shippingState ?? ""}
                className="w-full px-4 py-2.5 border border-neutral-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-transparent"
                placeholder="Wilayah Persekutuan"
              />
            </div>
          </div>

          <div className="grid sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-neutral-700 mb-1.5">Postal/Zip code</label>
              <input
                name="shippingZip"
                type="text"
                defaultValue={user.shippingZip ?? ""}
                className="w-full px-4 py-2.5 border border-neutral-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-transparent"
                placeholder="50000"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-neutral-700 mb-1.5">Country</label>
              <input
                name="shippingCountry"
                type="text"
                defaultValue={user.shippingCountry ?? "Malaysia"}
                className="w-full px-4 py-2.5 border border-neutral-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-transparent"
                placeholder="Malaysia"
              />
            </div>
          </div>

          <div className="flex justify-end">
            <button
              type="submit"
              disabled={shippingPending}
              className="px-6 py-2.5 bg-navy-700 hover:bg-navy-800 text-white font-semibold text-sm rounded-xl transition-colors disabled:opacity-60"
            >
              {shippingPending ? "Saving…" : "Save Shipping Address"}
            </button>
          </div>
        </form>
      </div>

      {/* Change Password Card */}
      <div className="bg-white rounded-2xl border border-neutral-200 p-6">
        <h2 className="font-semibold text-navy-800 mb-5 flex items-center gap-2">
          <Lock size={16} className="text-neutral-500" /> Change Password
        </h2>

        <form action={pwAction} className="space-y-4">
          {pwState?.success && (
            <div className="p-3 bg-emerald-50 border border-emerald-100 text-emerald-700 text-sm rounded-lg">
              {pwState.success}
            </div>
          )}
          {pwState?.error && (
            <div className="p-3 bg-red-50 border border-red-100 text-red-600 text-sm rounded-lg">
              {pwState.error}
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-neutral-700 mb-1.5">Current password</label>
            <input
              name="currentPassword"
              type="password"
              required
              className="w-full px-4 py-2.5 border border-neutral-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-transparent"
              placeholder="Enter your current password"
            />
          </div>

          <div className="grid sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-neutral-700 mb-1.5">New password</label>
              <input
                name="newPassword"
                type="password"
                required
                minLength={8}
                className="w-full px-4 py-2.5 border border-neutral-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-transparent"
                placeholder="At least 8 characters"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-neutral-700 mb-1.5">Confirm new password</label>
              <input
                name="confirmPassword"
                type="password"
                required
                minLength={8}
                className="w-full px-4 py-2.5 border border-neutral-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-transparent"
                placeholder="Repeat new password"
              />
            </div>
          </div>

          <div className="flex justify-end">
            <button
              type="submit"
              disabled={pwPending}
              className="px-6 py-2.5 bg-navy-700 hover:bg-navy-800 text-white font-semibold text-sm rounded-xl transition-colors disabled:opacity-60"
            >
              {pwPending ? "Changing…" : "Change Password"}
            </button>
          </div>
        </form>
      </div>

      {/* Account Details */}
      <div className="bg-white rounded-2xl border border-neutral-200 p-6">
        <h2 className="font-semibold text-navy-800 mb-4">Account Details</h2>
        <dl className="space-y-3 text-sm">
          <div className="flex justify-between">
            <dt className="text-neutral-500">Member since</dt>
            <dd className="text-neutral-800 font-medium">
              {new Date(user.createdAt).toLocaleDateString("en-MY", {
                year: "numeric",
                month: "long",
                day: "numeric",
              })}
            </dd>
          </div>
          <div className="flex justify-between">
            <dt className="text-neutral-500">Account role</dt>
            <dd className="text-neutral-800 font-medium">{roleBadge[user.role] ?? user.role}</dd>
          </div>
          <div className="flex justify-between">
            <dt className="text-neutral-500">Email verified</dt>
            <dd className={user.emailVerified ? "text-emerald-600 font-medium" : "text-amber-600 font-medium"}>
              {user.emailVerified
                ? new Date(user.emailVerified).toLocaleDateString("en-MY")
                : "Not verified — check your email"}
            </dd>
          </div>
        </dl>
      </div>
    </div>
  );
}