import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { fetchMyOrgs, Visibility } from '../../api';
import { useState, useEffect } from 'react';
import { HelpText } from './HelpText';

export function PreferencesForm({ user }: { user: { defaultVisibility: Visibility; defaultVisibilityOrgId: string | null } }) {
  const { data: orgs = [] } = useQuery({ queryKey: ['my-orgs'], queryFn: fetchMyOrgs });
  const qc = useQueryClient();
  const [vis, setVis] = useState<Visibility>(user.defaultVisibility);
  const [orgId, setOrgId] = useState<string | null>(user.defaultVisibilityOrgId);
  useEffect(() => { setVis(user.defaultVisibility); setOrgId(user.defaultVisibilityOrgId); }, [user]);

  const save = useMutation({
    mutationFn: async () => {
      const res = await fetch('/api/users/me/preferences', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ defaultVisibility: vis, defaultVisibilityOrgId: vis === 'org' ? orgId : null }),
      });
      if (!res.ok) throw new Error(await res.text());
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: ['auth', 'me'] }),
  });

  return (
    <div className="space-y-4">
      <section>
        <h3 className="text-sm font-bold text-slate-900">新規タスクのデフォルト公開範囲</h3>
        <div className="mt-2 flex gap-3 text-[13px]">
          <label><input type="radio" checked={vis === 'private'} onChange={() => setVis('private')} /> 🔒 非公開</label>
          <label><input type="radio" checked={vis === 'org'} onChange={() => setVis('org')} disabled={orgs.length === 0} /> 🏢 組織</label>
          <label><input type="radio" checked={vis === 'public'} onChange={() => setVis('public')} /> 🌐 公開</label>
        </div>
        <HelpText>
          🔒 非公開: 自分のみ閲覧可能 ／ 🏢 組織: 同じ Gitea org のメンバーが閲覧可能 ／ 🌐 公開: ログイン中の全ユーザーが閲覧可能
        </HelpText>
        {vis === 'org' && (
          <select value={orgId ?? ''} onChange={e => setOrgId(e.target.value)} className="mt-2 px-2 py-1 border rounded text-[13px]">
            {orgs.map(o => <option key={o.orgId} value={o.orgId}>{o.orgName}</option>)}
          </select>
        )}
      </section>
      <section>
        <h3 className="text-sm font-bold text-slate-900">所属している Gitea 組織</h3>
        <ul className="mt-2 text-[13px] text-slate-700 list-disc pl-5">
          {orgs.map(o => <li key={o.orgId}>{o.orgName}</li>)}
          {orgs.length === 0 && <li className="text-slate-400">（なし — Gitea でログインすると表示されます）</li>}
        </ul>
        <p className="mt-2 text-2xs text-slate-500">最新状態に更新するには、一度ログアウトして再ログインしてください。</p>
      </section>
      <button
        onClick={() => save.mutate()}
        disabled={save.isPending}
        className="px-3 py-1.5 rounded bg-accent text-accent-fg text-[13px]"
      >
        {save.isPending ? '保存中…' : '設定を保存'}
      </button>
      {save.isError && <div className="text-red-600 text-xs">{String(save.error)}</div>}
    </div>
  );
}
