import Link from 'next/link';
import { redirect } from 'next/navigation';
import { isAdminAuthenticated } from '@/lib/adminAuth';
import { changeAdminPassword } from './actions';

const ERROR_MESSAGES: Record<string, string> = {
  missing_fields: 'Please fill in all fields.',
  password_too_short: 'Password must be at least 8 characters.',
  passwords_dont_match: 'Passwords do not match.',
  invalid_current: 'Current password is incorrect.',
};

export default async function ChangeAdminPasswordPage({ searchParams }: { searchParams: { error?: string } }) {
  const isAuthenticated = await isAdminAuthenticated();
  if (!isAuthenticated) redirect('/admin/login');

  const error = searchParams.error ? ERROR_MESSAGES[searchParams.error] : null;

  return (
    <div className="mx-auto max-w-2xl px-6 py-12">
      <Link href="/admin/orders" className="tag-label text-muted hover:text-clay">
        ← Back to orders
      </Link>

      <h1 className="mt-6 font-display text-3xl">Change admin password</h1>
      <p className="mt-2 text-muted">Update your admin account password</p>

      {error && (
        <p className="mt-6 border border-splash-pink/40 bg-splash-pink/10 px-4 py-3 text-sm text-splash-pink">
          {error}
        </p>
      )}

      <form action={changeAdminPassword} className="mt-8 max-w-md space-y-6">
        <div>
          <label htmlFor="current" className="tag-label mb-2 block">
            Current password
          </label>
          <input
            id="current"
            name="currentPassword"
            type="password"
            required
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
          />
        </div>

        <div>
          <label htmlFor="new" className="tag-label mb-2 block">
            New password
          </label>
          <input
            id="new"
            name="newPassword"
            type="password"
            required
            minLength={8}
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
          />
          <p className="mt-1 text-xs text-muted">At least 8 characters</p>
        </div>

        <div>
          <label htmlFor="confirm" className="tag-label mb-2 block">
            Confirm new password
          </label>
          <input
            id="confirm"
            name="confirmPassword"
            type="password"
            required
            minLength={8}
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
          />
        </div>

        <button type="submit" className="bg-clay px-6 py-2 text-sm font-medium text-paper hover:bg-clay-dark">
          Update password
        </button>
      </form>
    </div>
  );
}