"use client";

import React, { useState } from "react";
import { Modal } from "@/components/ui/Modal";
import { Button } from "@/components/ui/Button";
import { KeyRound, Copy, Check, AlertTriangle, ShieldCheck } from "lucide-react";
import { AppUserRecord, DEFAULT_USER_PASSWORD } from "@/lib/userManagementTypes";

interface ResetPasswordModalProps {
  isOpen: boolean;
  onClose: () => void;
  user: AppUserRecord | null;
  onSuccess: (message: string) => void;
}

export const ResetPasswordModal: React.FC<ResetPasswordModalProps> = ({
  isOpen,
  onClose,
  user,
  onSuccess,
}) => {
  const [loading, setLoading] = useState(false);
  const [copied, setCopied] = useState(false);
  const [error, setError] = useState<string | null>(null);

  if (!user) return null;

  const handleCopy = () => {
    navigator.clipboard.writeText(DEFAULT_USER_PASSWORD);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleReset = async () => {
    try {
      setLoading(true);
      setError(null);

      const res = await fetch("/api/user-management", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          id: user.id,
          action: "reset_password",
          new_password: DEFAULT_USER_PASSWORD,
        }),
      });

      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.message || "Gagal mereset kata sandi");
      }

      onSuccess(`Kata sandi akun @${user.username} berhasil di-reset ke "${DEFAULT_USER_PASSWORD}"`);
      onClose();
    } catch (err: any) {
      setError(err?.message || "Terjadi kesalahan saat memproses reset");
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="Reset Kata Sandi Pengguna"
      description={`Konfirmasi pemulihan kata sandi akun @${user.username}`}
      maxWidth="md"
      footer={
        <div className="flex justify-end gap-2.5">
          <Button variant="outline" onClick={onClose} disabled={loading}>
            Batal
          </Button>
          <Button
            variant="danger"
            onClick={handleReset}
            disabled={loading}
            className="bg-amber-600 hover:bg-amber-700 text-white font-medium"
          >
            {loading ? "Memproses..." : "Ya, Reset Kata Sandi"}
          </Button>
        </div>
      }
    >
      <div className="space-y-4">
        {error && (
          <div className="p-3 bg-rose-50 border border-rose-200 text-rose-700 text-xs rounded-lg flex items-center gap-2">
            <AlertTriangle className="w-4 h-4 shrink-0 text-rose-500" />
            <span>{error}</span>
          </div>
        )}

        <div className="bg-amber-50/70 border border-amber-200/80 rounded-xl p-4 flex gap-3 text-amber-900">
          <KeyRound className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
          <div className="text-xs space-y-1">
            <p className="font-semibold text-amber-950">
              Apakah Anda yakin ingin mereset kata sandi akun ini?
            </p>
            <p className="text-amber-800 leading-relaxed">
              Kata sandi akan dikembalikan ke kata sandi standar sistem. Pengguna dapat mengubah kembali kata sandi setelah berhasil login ke akun mereka.
            </p>
          </div>
        </div>

        {/* User Info Details */}
        <div className="bg-slate-50 border border-slate-200 rounded-xl p-3.5 space-y-2.5 text-xs text-slate-700">
          <div className="flex justify-between items-center py-1 border-b border-slate-200/70">
            <span className="text-slate-500">Nama Lengkap</span>
            <span className="font-semibold text-slate-900">{user.name}</span>
          </div>
          <div className="flex justify-between items-center py-1 border-b border-slate-200/70">
            <span className="text-slate-500">Username</span>
            <span className="font-mono font-medium text-blue-700 bg-blue-50 px-2 py-0.5 rounded">
              @{user.username}
            </span>
          </div>
          <div className="flex justify-between items-center py-1 border-b border-slate-200/70">
            <span className="text-slate-500">Role / Hak Akses</span>
            <span className="font-medium text-slate-800">{user.role}</span>
          </div>
          <div className="flex justify-between items-center py-1">
            <span className="text-slate-500">Email</span>
            <span className="text-slate-700">{user.email || "-"}</span>
          </div>
        </div>

        {/* Default Password Box */}
        <div className="bg-blue-50/70 border border-blue-200 rounded-xl p-3.5">
          <div className="text-[11px] font-semibold text-blue-900 uppercase tracking-wide mb-1 flex items-center gap-1.5">
            <ShieldCheck className="w-3.5 h-3.5 text-blue-600" /> Kata Sandi Baru (Default)
          </div>
          <div className="flex items-center justify-between bg-white border border-blue-200 px-3 py-2 rounded-lg mt-1.5">
            <span className="font-mono text-sm font-bold text-slate-900 tracking-wider">
              {DEFAULT_USER_PASSWORD}
            </span>
            <button
              type="button"
              onClick={handleCopy}
              className="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1 font-medium px-2 py-1 hover:bg-blue-50 rounded transition-colors"
            >
              {copied ? (
                <>
                  <Check className="w-3.5 h-3.5 text-emerald-600" />
                  <span className="text-emerald-700">Tersalin</span>
                </>
              ) : (
                <>
                  <Copy className="w-3.5 h-3.5" />
                  <span>Salin</span>
                </>
              )}
            </button>
          </div>
          <p className="text-[11px] text-blue-700/80 mt-1.5">
            Berikan kata sandi ini kepada pengguna terkait setelah reset dilakukan.
          </p>
        </div>
      </div>
    </Modal>
  );
};