"use client";

import { useState } from "react";
import { Lock, Loader2 } from "lucide-react";
import { getSupabaseClient } from "@/lib/supabase";
import { PageHeader } from "@/components/ui/page-header";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

export default function ChangePasswordPage() {
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setMessage(null);

    if (newPassword.length < 6) {
      setMessage({ type: "error", text: "A nova senha precisa ter pelo menos 6 caracteres." });
      return;
    }

    if (newPassword !== confirmPassword) {
      setMessage({ type: "error", text: "As senhas não conferem." });
      return;
    }

    setSaving(true);
    try {
      const supabase = getSupabaseClient();
      const {
        data: { user },
      } = await supabase.auth.getUser();

      if (!user?.email) {
        setMessage({ type: "error", text: "Usuário não autenticado." });
        return;
      }

      const { error: signInError } = await supabase.auth.signInWithPassword({
        email: user.email,
        password: currentPassword,
      });

      if (signInError) {
        setMessage({ type: "error", text: "Senha atual incorreta." });
        return;
      }

      const { error } = await supabase.auth.updateUser({ password: newPassword });

      if (error) {
        setMessage({ type: "error", text: "Não foi possível atualizar a senha." });
        return;
      }

      setCurrentPassword("");
      setNewPassword("");
      setConfirmPassword("");
      setMessage({ type: "success", text: "Senha atualizada com sucesso." });
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Segurança"
        title="Alterar senha"
        subtitle="Atualize sua senha de acesso com segurança."
      />

      <form
        onSubmit={handleSubmit}
        className="ks-surface p-6 space-y-5 max-w-xl"
      >
        <div className="flex items-center gap-2 text-sm font-medium text-[var(--ks-color-text-primary)]">
          <Lock className="w-4 h-4 text-[var(--ks-color-primary)]" />
          Dados da senha
        </div>

        <Input
          id="current-password"
          label="Senha atual"
          type="password"
          value={currentPassword}
          onChange={(e) => setCurrentPassword(e.target.value)}
          required
        />

        <Input
          id="new-password"
          label="Nova senha"
          type="password"
          value={newPassword}
          onChange={(e) => setNewPassword(e.target.value)}
          required
        />

        <Input
          id="confirm-password"
          label="Confirmar nova senha"
          type="password"
          value={confirmPassword}
          onChange={(e) => setConfirmPassword(e.target.value)}
          required
        />

        {message ? (
          <div
            className={`text-sm px-4 py-2 rounded-md ${
              message.type === "success"
                ? "bg-[color:rgba(18,185,129,0.08)] text-[var(--ks-color-status-success)]"
                : "bg-[color:rgba(249,115,115,0.08)] text-[var(--ks-color-status-danger)]"
            }`}
          >
            {message.text}
          </div>
        ) : null}

        <div className="flex items-center justify-end">
          <Button
            type="submit"
            disabled={saving}
            icon={saving ? <Loader2 className="w-4 h-4 animate-spin" /> : undefined}
          >
            {saving ? "Atualizando..." : "Alterar senha"}
          </Button>
        </div>
      </form>
    </div>
  );
}