import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { createRequest } from '@/data/request/create-request';
import {
  KeyIcon,
  LockKeyIcon,
  PaperPlaneTiltIcon,
} from '@phosphor-icons/react';
import { useState, useTransition } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

export default function SecuritySection({ userId }: { userId: number }) {
  const { t } = useTranslation();
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [pwPending, startPwTransition] = useTransition();
  const [emailPending, startEmailTransition] = useTransition();

  const handleChangePassword = () => {
    if (!password) {
      toast.error(t('Please enter a new password'));
      return;
    }
    if (password.length < 8) {
      toast.error(t('Password must be at least 8 characters'));
      return;
    }
    if (password !== confirm) {
      toast.error(t('Passwords do not match'));
      return;
    }

    startPwTransition(async () => {
      const res = await createRequest({
        url: `/api/admin/users/${userId}/change-password`,
        formData: {
          new_password: password,
          new_password_confirmation: confirm,
        },
      });
      if (res?.success) {
        toast.success(res.message);
        setPassword('');
        setConfirm('');
      }
    });
  };

  const handleSendResetEmail = () => {
    startEmailTransition(async () => {
      const res = await createRequest({
        url: `/api/admin/users/${userId}/send-password-reset`,
      });
      if (res?.success) toast.success(res.message);
    });
  };

  return (
    <div className="rounded-xl bg-white p-5 shadow-box">
      <h4 className="text-xs font-semibold tracking-widest text-black/30 uppercase">
        {t('Security')}
      </h4>
      <Separator className="mt-1 mb-4" />

      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
        <div>
          <div className="mb-4 flex items-center gap-2">
            <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-black/5 text-black/50">
              <KeyIcon weight="bold" className="size-4" />
            </div>
            <div>
              <p className="text-sm font-medium">{t('Change Password')}</p>
              <p className="text-xs text-black/40">
                {t('Set a new password for this user')}
              </p>
            </div>
          </div>
          <div className="space-y-3">
            <div className="space-y-1.5">
              <Label className="text-xs text-black/50">
                {t('New Password')}
              </Label>
              <Input
                type="password"
                placeholder={t('Min. 8 characters')}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                disabled={pwPending}
              />
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs text-black/50">
                {t('Confirm Password')}
              </Label>
              <Input
                type="password"
                placeholder={t('Repeat new password')}
                value={confirm}
                onChange={(e) => setConfirm(e.target.value)}
                disabled={pwPending}
              />
            </div>
            <Button
              size="sm"
              className="w-full"
              onClick={handleChangePassword}
              loading={pwPending}
              disabled={pwPending || !password || !confirm}
            >
              <LockKeyIcon weight="bold" className="size-4" />
              {t('Update Password')}
            </Button>
          </div>
        </div>

        <div>
          <div className="mb-4 flex items-center gap-2">
            <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-black/5 text-black/50">
              <PaperPlaneTiltIcon weight="bold" className="size-4" />
            </div>
            <div>
              <p className="text-sm font-medium">{t('Password Reset Email')}</p>
              <p className="text-xs text-black/40">
                {t("Send a reset link to the user's email")}
              </p>
            </div>
          </div>
          <p className="mb-4 text-sm text-black/50">
            {t(
              'The user will receive an email with a secure link to set a new password on their own. The link expires after 60 minutes.',
            )}
          </p>
          <Button
            variant="outline"
            size="sm"
            className="w-full"
            onClick={handleSendResetEmail}
            loading={emailPending}
            disabled={emailPending}
          >
            <PaperPlaneTiltIcon weight="bold" className="size-4" />
            {t('Send Reset Email')}
          </Button>
        </div>
      </div>
    </div>
  );
}