o2o-site-AEO/solution/frontend/src/pages/AccountPage.tsx

import {useEffect, useState, type FormEvent} from 'react';
import {KeyRound, Loader2} from 'lucide-react';
import {AuthProvider, updateMe, useMe} from '@/api';
import {AppShell, PageContainer} from '@/components/layout/AppShell';
import {Button} from '@/components/ui/button';
import {Input} from '@/components/ui/input';
import {notify, notifyApiError} from '@/lib/notify';
import {toAuthUser, useAuthStore} from '@/stores/auth';

/**
 * 내 정보 — `PATCH /v1/auth/me` 한 곳이 받는 것만 그린다.
 *
 * ★ 상호(company)는 읽기 전용이다. Req_UpdateMe 에 없다 — 자기 소속을 스스로 바꾸지 못하게
 *   일부러 뺀 필드라, 입력칸을 두면 저장을 눌러도 아무 일이 안 일어난다.
 * ★ 구글 계정에는 바꿀 비밀번호가 없다(서버가 ACCOUNT_PROVIDER_CONFLICT 로 막는다) —
 *   입력칸 자체를 그리지 않는다.
 */
export function AccountPage() {
  const {data, isLoading, refetch} = useMe();
  const setUser = useAuthStore((s) => s.setUser);

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [contact, setContact] = useState('');
  const [password, setPassword] = useState('');
  const [isSaving, setIsSaving] = useState(false);

  // 서버 값이 도착하면 한 번 채운다. 타이핑 중에 덮어쓰지 않게 응답이 바뀔 때만 돈다.
  useEffect(() => {
    if (!data) return;
    setName(data.name ?? '');
    setEmail(data.email ?? '');
    setContact(data.contact_number ?? '');
  }, [data]);

  const isGoogle = data?.provider === AuthProvider.GOOGLE;

  const handleSubmit = async (event: FormEvent) => {
    event.preventDefault();
    setIsSaving(true);
    try {
      const res = await updateMe({
        name,
        email,
        contact_number: contact,
        ...(password ? {password} : {}),
      });
      if (!res.result?.success) {
        notifyApiError({data: res}, '저장하지 못했습니다.');
        return;
      }
      // 사이드바가 이름을 들고 있다 — 저장하고 스토어를 안 갱신하면 새로고침 전까지 옛 이름이다.
      if (res.user_id && res.id) setUser(toAuthUser(res));
      setPassword('');
      notify.success('저장했습니다.');
      await refetch();
    } catch (error) {
      notifyApiError(error, '저장하지 못했습니다.');
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <AppShell>
      <PageContainer title="내 정보" description="이름·연락처와 로그인 정보를 관리합니다.">
        {isLoading ? (
          <div className="flex items-center justify-center py-20 text-muted-foreground">
            <Loader2 className="size-5 animate-spin" />
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="max-w-lg space-y-5">
            <section className="space-y-3 rounded-xl border border-border bg-card p-5">
              <Field label="로그인 아이디">
                <p className="text-sm">{isGoogle ? (data?.email ?? '구글 계정') : (data?.id ?? '')}</p>
                <p className="mt-0.5 text-xs text-muted-foreground">
                  {isGoogle ? '구글 계정으로 로그인합니다.' : '아이디는 바꿀 수 없습니다.'}
                </p>
              </Field>

              <Field label="상호">
                <p className="text-sm">{data?.company?.name ?? '-'}</p>
                <p className="mt-0.5 text-xs text-muted-foreground">
                  상호 변경은 고객센터로 문의해 주세요.
                </p>
              </Field>
            </section>

            <section className="space-y-4 rounded-xl border border-border bg-card p-5">
              <Field label="이름">
                <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="홍길동" />
              </Field>
              <Field label="이메일">
                <Input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="owner@example.com"
                />
              </Field>
              <Field label="연락처">
                <Input value={contact} onChange={(e) => setContact(e.target.value)} placeholder="010-0000-0000" />
              </Field>
            </section>

            {!isGoogle && (
              <section className="space-y-4 rounded-xl border border-border bg-card p-5">
                <Field label="새 비밀번호">
                  <Input
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder="비우면 지금 비밀번호를 그대로 씁니다"
                    autoComplete="new-password"
                  />
                </Field>
              </section>
            )}

            {isGoogle && (
              <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
                <KeyRound className="size-3.5" />
                구글 계정이라 비밀번호가 없습니다 — 비밀번호는 구글에서 관리합니다.
              </p>
            )}

            <Button type="submit" variant="primary" isLoading={isSaving}>
              저장
            </Button>
          </form>
        )}
      </PageContainer>
    </AppShell>
  );
}

function Field({label, children}: {label: string; children: React.ReactNode}) {
  return (
    <label className="block">
      <span className="mb-1.5 block text-xs font-medium text-muted-foreground">{label}</span>
      {children}
    </label>
  );
}

// 라우트 모듈은 default export 를 요구한다(routes.ts 가 이 파일을 가리킨다).
export default AccountPage;