import { useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { Pencil, Upload, User as UserIcon } from 'lucide-react';
import { profileGet, profilePhotoUpload, profileUpsert } from '@/lib/api';
import type { ProfileInfo } from '@/lib/types';
import { Button, Dialog, Field, Input, Select, Textarea, useToast } from '@/components/ui';

const EMPTY: ProfileInfo = {
  name: '', gender: '', birth: '', nation: '', native: '', political: '',
  school: '', college: '', major: '', className: '', studentId: '', degree: '',
  phone: '', email: '', homepage: '', photoUrl: '', selfIntro: '',
  eduLength: '', eduStart: '', eduEnd: '', majorCourses: ''
};

const FIELD_GROUPS: { title: string; fields: { key: keyof ProfileInfo; label: string; type?: string; options?: string[] }[] }[] = [
  { title: '基本信息', fields: [
    { key: 'name', label: '姓名' },
    { key: 'gender', label: '性别', options: ['', '男', '女'] },
    { key: 'birth', label: '出生日期', type: 'date' },
    { key: 'nation', label: '民族' },
    { key: 'native', label: '籍贯' },
    { key: 'political', label: '政治面貌' },
  ]},
  { title: '学校信息', fields: [
    { key: 'school', label: '学校' },
    { key: 'college', label: '学院' },
    { key: 'major', label: '专业' },
    { key: 'className', label: '班级' },
    { key: 'studentId', label: '学号' },
    { key: 'degree', label: '学历层次', options: ['', '专科', '本科', '硕士研究生', '博士研究生'] },
    { key: 'eduLength', label: '学制', options: ['', '两年', '三年', '四年', '五年'] },
    { key: 'eduStart', label: '入学时间', type: 'month' },
    { key: 'eduEnd', label: '毕业时间', type: 'month' },
  ]},
  { title: '主修课程', fields: [
    { key: 'majorCourses', label: '主修课程' },
  ]},
  { title: '联系方式', fields: [
    { key: 'phone', label: '手机' },
    { key: 'email', label: '邮箱' },
    { key: 'homepage', label: '个人主页 / 博客' },
  ]},
];

export function ProfilePage() {
  const qc = useQueryClient();
  const toast = useToast();
  const [editing, setEditing] = useState(false);
  const [form, setForm] = useState<ProfileInfo>(EMPTY);
  const [photoBusy, setPhotoBusy] = useState(false);

  const q = useQuery({ queryKey: ['profile'], queryFn: profileGet });
  const info: Partial<ProfileInfo> = q.data?.content?.info ?? {};
  const set = (patch: Partial<ProfileInfo>) => setForm(f => ({ ...EMPTY, ...f, ...patch }));

  const openEdit = () => { setForm({ ...EMPTY, ...info }); setEditing(true); };
  const saveMut = useMutation({
    mutationFn: () => profileUpsert({ info: form }),
    onSuccess: () => { toast('success', '个人信息已保存'); setEditing(false); void qc.invalidateQueries({ queryKey: ['profile'] }); },
    onError: (e: Error) => toast('error', e.message)
  });

  const onPhoto = async (f: File | undefined) => {
    if (!f) return;
    setPhotoBusy(true);
    try {
      const url = await profilePhotoUpload(f);
      // 以已保存档案为底，只更新 photoUrl —— 避免覆盖其他字段
      const next = { ...EMPTY, ...info, photoUrl: url };
      await profileUpsert({ info: next });
      setForm(prev => ({ ...EMPTY, ...prev, photoUrl: url }));
      void qc.invalidateQueries({ queryKey: ['profile'] });
      toast('success', '证件照已上传');
    } catch (e) { toast('error', (e as Error).message); }
    setPhotoBusy(false);
  };

  const photo = info.photoUrl;

  return (
    <div className="mx-auto max-w-[880px] px-3 py-4 sm:px-6 sm:py-5">
      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
        <h2 className="text-[15px] font-semibold text-ink-1">个人信息</h2>
        <Button variant="primary" onClick={openEdit}><Pencil size={13} /> 编辑</Button>
      </div>

      {q.isLoading ? (
        <div className="py-16 text-center text-[13px] text-ink-3">加载中…</div>
      ) : (
        <div className="rounded-lg border border-line bg-surface shadow-card">
          <div className="flex flex-col gap-4 border-b border-line p-4 sm:flex-row sm:items-center">
            <div className="flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-full border border-line bg-surface-2">
              {photo ? <img src={photo} alt="证件照" className="h-full w-full object-cover" />
                : <UserIcon size={32} className="text-ink-3" />}
            </div>
            <div className="min-w-0 flex-1">
              <div className="text-[17px] font-semibold text-ink-1">{info.name || '未填写姓名'}</div>
              <div className="mt-0.5 text-[12px] text-ink-3">
                {[info.school, info.college, info.major].filter(Boolean).join(' · ') || '完善学校信息后，简历将自动填充'}
              </div>
            </div>
            <label className="flex cursor-pointer items-center gap-1.5 rounded-md border border-line px-2.5 py-1.5 text-[12px] text-ink-2 transition-colors hover:border-line-strong">
              <Upload size={13} />
              {photoBusy ? '上传中…' : (photo ? '更换证件照' : '上传证件照')}
              <input type="file" accept="image/*" className="hidden" disabled={photoBusy}
                onChange={e => { void onPhoto(e.target.files?.[0]); e.target.value = ''; }} />
            </label>
          </div>

          {FIELD_GROUPS.map(g => (
            <div key={g.title} className="border-b border-line px-4 py-3 last:border-b-0">
              <div className="mb-2 text-[12px] font-semibold text-ink-2">{g.title}</div>
              <dl className="grid grid-cols-1 gap-x-6 gap-y-1.5 sm:grid-cols-2">
                {g.fields.map(f => {
                  const v = (info[f.key] as string) || '';
                  return (
                    <div key={f.key} className="grid min-w-0 grid-cols-[84px_1fr] gap-x-2.5 py-0.5">
                      <dt className="shrink-0 text-right text-[12px] text-ink-3">{f.label}</dt>
                      <dd className={'min-w-0 truncate text-[12.5px] ' + (v ? 'text-ink-1' : 'text-ink-3/60')} title={v}>{v || '未填写'}</dd>
                    </div>
                  );
                })}
              </dl>
            </div>
          ))}
        </div>
      )}

      {!info.selfIntro && (
        <div className="mt-3 rounded-md border border-dashed border-line px-4 py-2.5 text-[12px] text-ink-3">
          提示：编辑里填写「自我评价」后，可一键用于简历生成。
        </div>
      )}

      <Dialog open={editing} onClose={() => setEditing(false)} width={720} title="编辑个人信息"
        footer={<>
          <span className="mr-auto text-[12px] text-ink-3">填写一次，填表与简历自动复用</span>
          <Button variant="primary" onClick={() => saveMut.mutate()} disabled={saveMut.isPending}>保存</Button>
        </>}>
        <div className="flex flex-col gap-4">
          {FIELD_GROUPS.map(g => (
            <div key={g.title}>
              <div className="mb-2 text-[12px] font-semibold text-ink-2">{g.title}</div>
              <div className="grid grid-cols-1 gap-x-3 gap-y-3 sm:grid-cols-2">
                {g.fields.map(f => (
                  <Field key={f.key} label={f.label}>
                    {f.options ? (
                      <Select value={form[f.key] as string || ''} onChange={e => set({ [f.key]: e.target.value } as Partial<ProfileInfo>)}
                        options={f.options.map(o => ({ value: o, label: o || '未选择' }))} />
                    ) : (
                      <Input type={f.type || 'text'} value={form[f.key] as string || ''} onChange={e => set({ [f.key]: e.target.value } as Partial<ProfileInfo>)} />
                    )}
                  </Field>
                ))}
              </div>
            </div>
          ))}
          <div className="border-t border-line pt-3">
            <Field label="自我评价" hint="简历「自我评价」板块使用">
              <Textarea rows={4} value={form.selfIntro} onChange={e => set({ selfIntro: e.target.value })} placeholder="简述性格、能力、方向…" />
            </Field>
          </div>
        </div>
      </Dialog>
    </div>
  );
}