"use client";

import { SubCard } from "@/components/molecules/SubCard/SubCard";

interface PasswordChangeCardProps {
  isChanging: boolean;
  error?: string | null;
  success?: string | null;
  form: { currentPassword: string; newPassword: string; confirmPassword: string };
  setForm: (next: Partial<PasswordChangeCardProps["form"]>) => void;
  onSubmit: () => void;
}

export function PasswordChangeCard({
  isChanging,
  error,
  success,
  form,
  setForm,
  onSubmit,
}: PasswordChangeCardProps) {
  return (
    <SubCard>
      <h2 className="text-xl font-semibold text-gray-900 mb-4">Change Password</h2>
      {success && (
        <div className="mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded">
          {success}
        </div>
      )}
      {error && (
        <div className="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
          {error}
        </div>
      )}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Current Password</label>
          <input
            type="password"
            value={form.currentPassword}
            onChange={e => setForm({ currentPassword: e.target.value })}
            className="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
            placeholder="••••••••"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">New Password</label>
          <input
            type="password"
            value={form.newPassword}
            onChange={e => setForm({ newPassword: e.target.value })}
            className="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
            placeholder="New secure password"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Confirm New Password
          </label>
          <input
            type="password"
            value={form.confirmPassword}
            onChange={e => setForm({ confirmPassword: e.target.value })}
            className="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
            placeholder="Re-enter new password"
          />
        </div>
      </div>
      <div className="flex items-center justify-end space-x-3 pt-6 border-t border-gray-200">
        <button
          onClick={onSubmit}
          disabled={isChanging}
          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 transition-colors"
        >
          {isChanging ? "Changing..." : "Change Password"}
        </button>
      </div>
      <p className="text-xs text-gray-500 mt-3">
        Password must be at least 8 characters and include uppercase, lowercase, number, and special
        character.
      </p>
    </SubCard>
  );
}
