import { useEffect, useState } from "react";
import { useAuth } from "@/contexts/AuthContext";
import { authService } from "@/lib/auth-service";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Loader2, User, Shield } from "lucide-react";
import { toast } from "sonner";
import { ApplicantStaffProfileSection } from "./ApplicantStaffProfileSection";
import type { StaffProfileDto } from "@/components/profile/types";

const emailHint = "Email tài khoản do hệ thống gán; liên hệ quản trị nếu cần thay đổi.";

/**
 * Hồ sơ người nộp đơn: xem / sửa thông tin cá nhân và đổi mật khẩu.
 */
export function ApplicantProfileView() {
  const { user, isDemoMode, updateUserFields, applyAuthUser } = useAuth();

  const [loadingProfile, setLoadingProfile] = useState(true);
  const [fullName, setFullName] = useState(user?.name ?? "");
  const [phone, setPhone] = useState(user?.phone ?? "");
  const [emailDisplay, setEmailDisplay] = useState(user?.email ?? "");
  const [staffProfile, setStaffProfile] = useState<StaffProfileDto | undefined>(undefined);

  const [savingInfo, setSavingInfo] = useState(false);
  const [infoError, setInfoError] = useState("");

  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [newPasswordConfirm, setNewPasswordConfirm] = useState("");
  const [savingPw, setSavingPw] = useState(false);
  const [pwError, setPwError] = useState("");

  useEffect(() => {
    let cancelled = false;
    const run = async () => {
      if (isDemoMode) {
        if (!cancelled) {
          setFullName(user?.name ?? "");
          setPhone(user?.phone ?? "");
          setEmailDisplay(user?.email ?? "");
          setStaffProfile(undefined);
          setLoadingProfile(false);
        }
        return;
      }
      setLoadingProfile(true);
      const res = await authService.getProfile();
      if (cancelled) return;
      if (res.success) {
        const p = res.profile;
        setFullName(p.name ?? "");
        setPhone(p.phone ?? "");
        setEmailDisplay(p.email);
        setStaffProfile(p.staffProfile);
      } else {
        setFullName(user?.name ?? "");
        setPhone(user?.phone ?? "");
        setEmailDisplay(user?.email ?? "");
        toast.error(res.error);
      }
      setLoadingProfile(false);
    };
    void run();
    return () => {
      cancelled = true;
    };
  }, [isDemoMode, user?.id]);

  const handleSaveInfo = async (e: React.FormEvent) => {
    e.preventDefault();
    setInfoError("");
    if (isDemoMode) {
      toast.info("Chế độ demo không lưu hồ sơ lên máy chủ.");
      return;
    }
    if (fullName.trim().length < 2) {
      setInfoError("Nhập họ tên đầy đủ (ít nhất 2 ký tự).");
      return;
    }
    setSavingInfo(true);
    const res = await authService.updateProfile({
      fullName: fullName.trim(),
      phone: phone.trim() ? phone.trim() : null,
    });
    if (res.success) {
      const p = res.profile;
      updateUserFields({ name: p.name, email: p.email, phone: p.phone });
      setFullName(p.name ?? "");
      setPhone(p.phone ?? "");
      if (p.staffProfile) setStaffProfile(p.staffProfile);
      toast.success("Đã cập nhật thông tin cá nhân.");
    } else {
      setInfoError(res.error);
    }
    setSavingInfo(false);
  };

  const handleChangePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    setPwError("");
    if (isDemoMode) {
      toast.info("Chế độ demo — không đổi mật khẩu qua API.");
      return;
    }
    if (newPassword !== newPasswordConfirm) {
      setPwError("Mật khẩu mới xác nhận không khớp.");
      return;
    }
    setSavingPw(true);
    const res = await authService.changePassword({
      currentPassword,
      newPassword,
      newPasswordConfirm,
    });
    if (res.success) {
      const applied = applyAuthUser(res.user);
      if (applied.success) {
        setCurrentPassword("");
        setNewPassword("");
        setNewPasswordConfirm("");
        toast.success("Đã đổi mật khẩu. Phiên đăng nhập đã được gia hạn.");
      } else {
        setPwError(applied.error || "Không cập nhật được phiên sau khi đổi mật khẩu.");
      }
    } else {
      setPwError(res.error);
    }
    setSavingPw(false);
  };

  if (loadingProfile) {
    return (
      <div className="flex min-h-[40vh] items-center justify-center gap-2 text-muted-foreground">
        <Loader2 className="h-5 w-5 animate-spin" aria-hidden />
        <span>Đang tải hồ sơ…</span>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-2xl space-y-6 animate-fade-in">
      <div>
        <h1 className="text-2xl font-serif font-semibold tracking-tight">Hồ sơ cá nhân</h1>
        <p className="text-sm text-muted-foreground">
          Xem thông tin đã đăng ký, chỉnh sửa liên hệ hoặc đổi mật khẩu.
        </p>
      </div>

      {isDemoMode ? (
        <Alert>
          <AlertDescription>
            Bạn đang ở chế độ demo: thay đổi hồ sơ và mật khẩu không được lưu lên máy chủ.
          </AlertDescription>
        </Alert>
      ) : null}

      <ApplicantStaffProfileSection
        isDemoMode={isDemoMode}
        initialStaff={staffProfile}
        onStaffUpdated={(s) => setStaffProfile(s)}
      />

      <Tabs defaultValue="personal" className="w-full">
        <TabsList className="mb-2 grid w-full max-w-md grid-cols-2">
          <TabsTrigger value="personal" className="gap-1.5">
            <User className="h-4 w-4" />
            Thông tin
          </TabsTrigger>
          <TabsTrigger value="security" className="gap-1.5">
            <Shield className="h-4 w-4" />
            Bảo mật
          </TabsTrigger>
        </TabsList>

        <TabsContent value="personal">
          <Card>
            <CardHeader>
              <CardTitle>Thông tin cá nhân</CardTitle>
              <CardDescription>Họ tên và cách liên hệ hiển thị trong hồ sơ nộp đơn.</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSaveInfo} className="space-y-4">
                {infoError ? (
                  <Alert variant="destructive">
                    <AlertDescription>{infoError}</AlertDescription>
                  </Alert>
                ) : null}
                <div className="space-y-2">
                  <Label htmlFor="applicant-email">Email</Label>
                  <Input
                    id="applicant-email"
                    type="email"
                    value={emailDisplay}
                    readOnly
                    className="bg-muted/50"
                    aria-describedby="email-hint"
                  />
                  <p id="email-hint" className="text-xs text-muted-foreground">
                    {emailHint}
                  </p>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="applicant-name">Họ và tên</Label>
                  <Input
                    id="applicant-name"
                    value={fullName}
                    onChange={(e) => setFullName(e.target.value)}
                    autoComplete="name"
                    required
                    minLength={2}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="applicant-phone">Số điện thoại (tuỳ chọn)</Label>
                  <Input
                    id="applicant-phone"
                    value={phone ?? ""}
                    onChange={(e) => setPhone(e.target.value)}
                    inputMode="tel"
                    autoComplete="tel"
                    placeholder="Ví dụ: 09xx xxx xxx"
                  />
                </div>
                <Button type="submit" disabled={savingInfo || isDemoMode}>
                  {savingInfo ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Đang lưu…
                    </>
                  ) : (
                    "Lưu thay đổi"
                  )}
                </Button>
              </form>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="security">
          <Card>
            <CardHeader>
              <CardTitle>Đổi mật khẩu</CardTitle>
              <CardDescription>
                Mật khẩu mới phải đủ dài, gồm chữ hoa, chữ thường, số và ký tự đặc biệt.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleChangePassword} className="space-y-4 max-w-md">
                {pwError ? (
                  <Alert variant="destructive">
                    <AlertDescription>{pwError}</AlertDescription>
                  </Alert>
                ) : null}
                <div className="space-y-2">
                  <Label htmlFor="applicant-current-pw">Mật khẩu hiện tại</Label>
                  <Input
                    id="applicant-current-pw"
                    type="password"
                    value={currentPassword}
                    onChange={(e) => setCurrentPassword(e.target.value)}
                    autoComplete="current-password"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="applicant-new-pw">Mật khẩu mới</Label>
                  <Input
                    id="applicant-new-pw"
                    type="password"
                    value={newPassword}
                    onChange={(e) => setNewPassword(e.target.value)}
                    autoComplete="new-password"
                    required
                    minLength={6}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="applicant-confirm-pw">Xác nhận mật khẩu mới</Label>
                  <Input
                    id="applicant-confirm-pw"
                    type="password"
                    value={newPasswordConfirm}
                    onChange={(e) => setNewPasswordConfirm(e.target.value)}
                    autoComplete="new-password"
                    required
                  />
                </div>
                <Button type="submit" disabled={savingPw || isDemoMode}>
                  {savingPw ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Đang cập nhật…
                    </>
                  ) : (
                    "Đổi mật khẩu"
                  )}
                </Button>
              </form>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}
