"use client";

import { PasswordInput, Button, Label } from "@/components/atoms";
import { SubCard } from "@/components/molecules/SubCard/SubCard";
import { PasswordRequirements, PasswordMatchIndicator } from "@/features/auth/components";
import { usePasswordValidation } from "@/features/auth/hooks/usePasswordValidation";

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) {
  const { checks } = usePasswordValidation(form.newPassword);
  const showPasswordMatch = form.confirmPassword.length > 0;
  const passwordsMatch = form.newPassword === form.confirmPassword;

  return (
    <SubCard>
      <h2 className="text-xl font-semibold text-foreground mb-4">Change Password</h2>
      {success && (
        <div className="mb-4 bg-success-bg border border-success-border text-success px-4 py-3 rounded">
          {success}
        </div>
      )}
      {error && (
        <div className="mb-4 bg-danger-bg border border-danger-border text-danger px-4 py-3 rounded">
          {error}
        </div>
      )}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <Label className="mb-2">Current Password</Label>
          <PasswordInput
            value={form.currentPassword}
            onChange={e => setForm({ currentPassword: e.target.value })}
            placeholder="••••••••"
            disabled={isChanging}
          />
        </div>
        <div>
          <Label className="mb-2">New Password</Label>
          <PasswordInput
            value={form.newPassword}
            onChange={e => setForm({ newPassword: e.target.value })}
            placeholder="New secure password"
            disabled={isChanging}
          />
        </div>
        <div>
          <Label className="mb-2">Confirm New Password</Label>
          <PasswordInput
            value={form.confirmPassword}
            onChange={e => setForm({ confirmPassword: e.target.value })}
            placeholder="Re-enter new password"
            disabled={isChanging}
          />
        </div>
      </div>
      <div className="mt-3">
        <PasswordRequirements checks={checks} showHint={form.newPassword.length === 0} />
      </div>
      {showPasswordMatch && (
        <div className="mt-2">
          <PasswordMatchIndicator passwordsMatch={passwordsMatch} />
        </div>
      )}
      <div className="flex items-center justify-end space-x-3 pt-6 border-t border-border">
        <Button
          type="button"
          onClick={onSubmit}
          disabled={isChanging}
          loading={isChanging}
          loadingText="Changing..."
        >
          Change Password
        </Button>
      </div>
    </SubCard>
  );
}
