import { useEffect, useMemo, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import toast from 'react-hot-toast';
import {
  Bell,
  BriefcaseBusiness,
  Building2,
  Check,
  ChevronLeft,
  Database,
  ListChecks,
  Mail,
  Plus,
  Save,
  Search,
  Settings as SettingsIcon,
  ShieldCheck,
  SlidersHorizontal,
  Trash2,
  Users,
  CalendarDays,
  TimerReset,
  MessagesSquare,
  UserRound,
  Wrench,
  Image as ImageIcon,
  UploadCloud,
} from 'lucide-react';
import api from '../services/api';
import ThemeAccentPicker from '../components/ThemeAccentPicker';
import Modal from '../components/Modal';
import { applyThemeMode, getThemeMode, themeModes } from '../utils/themeMode';

const groupMeta = {
  general: { label: 'عمومی', icon: Building2 },
  task: { label: 'تسک‌ها', icon: ListChecks },
  project: { label: 'پروژه‌ها', icon: BriefcaseBusiness },
  backlog: { label: 'بک‌لاگ', icon: Database },
  notification: { label: 'اعلان‌ها', icon: Bell },
  mail: { label: 'ایمیل', icon: Mail },
  security: { label: 'امنیت', icon: ShieldCheck },
  app: { label: 'برنامه', icon: SlidersHorizontal },
  people: { label: 'منابع انسانی', icon: Users },
  personalization: { label: 'شخصی‌سازی', icon: SlidersHorizontal },
  calendar: { label: 'تقویم و زمان کاری', icon: CalendarDays },
  sprint: { label: 'چابکی و اسپرینت', icon: TimerReset },
  meeting: { label: 'جلسات و یادآوری', icon: MessagesSquare },
};

const groupDescriptions = {
  general: 'هویت، اطلاعات تماس و تنظیمات عمومی سازمان',
  people: 'عنوان‌های شغلی و گزینه‌های مرتبط با اعضای سازمان',
  task: 'وضعیت‌ها و اولویت‌های پیش‌فرض تسک‌ها',
  project: 'چرخه عمر، اولویت و ارزیابی ریسک پروژه‌ها',
  backlog: 'انواع و مراحل پالایش آیتم‌های بک‌لاگ',
  personalization: 'ظاهر سامانه، حالت نمایش و رنگ‌بندی شخصی',
  notification: 'نوع‌ها، کانال‌ها و سیاست دریافت اعلان',
  calendar: 'منطقه زمانی، روزهای کاری و رفتار تقویم',
  sprint: 'قواعد سلامت اسپرینت و سیاست‌های چابکی',
  meeting: 'پیش‌فرض جلسه، یادآوری و ارزیابی اثربخشی',
  mail: 'ارسال ایمیل و زیرساخت SMTP',
  security: 'نقش‌ها، مجوزها و امنیت حساب کاربری',
};

const groupOrder = ['general', 'people', 'task', 'project', 'backlog', 'calendar', 'sprint', 'meeting', 'notification', 'mail', 'security'];

const keyDescriptions = {
  company_name: 'نامی که در هویت سازمان و بخش‌های مدیریتی نمایش داده می‌شود.',
  company_phone: 'شماره تماس رسمی سازمان برای نمایش در اطلاعات عمومی.',
  company_address: 'نشانی کامل دفتر یا محل اصلی سازمان.',
  company_logo: 'لوگوی رسمی سازمان که در منوی اصلی سامانه نمایش داده می‌شود.',
  default_task_statuses: 'مراحل مجاز گردش کار تسک‌ها را مشخص می‌کند.',
  default_priorities: 'اولویت‌هایی که هنگام ساخت تسک و بک‌لاگ قابل انتخاب هستند.',
  default_project_statuses: 'مراحل استاندارد چرخه عمر پروژه را مشخص می‌کند.',
  risk_levels: 'سطوح قابل انتخاب برای ارزیابی ریسک پروژه.',
  backlog_types: 'دسته‌بندی‌های قابل استفاده برای آیتم‌های بک‌لاگ.',
  backlog_statuses: 'وضعیت‌های داخلی فرآیند پالایش بک‌لاگ.',
  notification_types: 'رویدادهایی که اجازه تولید اعلان در سامانه دارند.',
  smtp_settings: 'اطلاعات اتصال به سرویس ارسال ایمیل سازمان.',
  job_titles: 'عنوان‌های شغلی قابل انتخاب برای اعضای سازمان.',
  working_days: 'روزهایی که در برنامه‌ریزی و تقویم، روز کاری محسوب می‌شوند.',
  organization_timezone: 'مبنای زمانی ثبت و نمایش رویدادهای سازمان.',
  default_meeting_reminder_minutes: 'فاصله زمانی یادآوری پیش‌فرض پیش از شروع جلسه.',
  meeting_effectiveness_enabled: 'نمایش فرم ارزیابی اثربخشی بعد از پایان جلسه.',
  sprint_health_override_requires_reason: 'برای تغییر دستی وضعیت سلامت اسپرینت، ثبت دلیل را الزامی می‌کند.',
};

const choiceOptions = {
  working_days: [
    ['saturday', 'شنبه'], ['sunday', 'یکشنبه'], ['monday', 'دوشنبه'], ['tuesday', 'سه‌شنبه'],
    ['wednesday', 'چهارشنبه'], ['thursday', 'پنجشنبه'], ['friday', 'جمعه'],
  ],
  default_task_statuses: [
    ['todo', 'برای انجام'], ['in_progress', 'در حال انجام'], ['waiting', 'در انتظار'], ['review', 'بازبینی'], ['done', 'انجام‌شده'],
  ],
  default_project_statuses: [
    ['planning', 'برنامه‌ریزی'], ['in_progress', 'در حال انجام'], ['waiting', 'در انتظار'], ['on_hold', 'متوقف'], ['completed', 'تکمیل‌شده'], ['cancelled', 'لغوشده'],
  ],
  default_priorities: [['low', 'کم'], ['medium', 'متوسط'], ['high', 'زیاد'], ['urgent', 'فوری'], ['critical', 'بحرانی']],
  risk_levels: [['low', 'کم'], ['medium', 'متوسط'], ['high', 'زیاد'], ['critical', 'بحرانی']],
  backlog_types: [['idea', 'ایده'], ['feature', 'قابلیت'], ['bug', 'باگ'], ['improvement', 'بهبود'], ['task', 'تسک']],
  backlog_statuses: [['new', 'جدید'], ['reviewed', 'بررسی‌شده'], ['ready', 'آماده'], ['rejected', 'ردشده']],
  notification_types: [['task_assigned', 'تخصیص تسک'], ['task_overdue', 'تسک عقب‌افتاده'], ['meeting_created', 'جلسه جدید'], ['mention', 'اشاره به کاربر']],
};

const typeLabels = {
  string: 'متن کوتاه',
  textarea: 'متن بلند',
  number: 'عدد',
  boolean: 'کلید روشن/خاموش',
  list: 'لیست',
  json: 'ساختار داده',
};

const keyLabels = {
  company_name: 'نام شرکت',
  company_phone: 'شماره تماس شرکت',
  company_address: 'آدرس شرکت',
  company_logo: 'لوگوی شرکت',
  default_task_statuses: 'وضعیت‌های پیش‌فرض تسک',
  default_priorities: 'اولویت‌های پیش‌فرض',
  default_project_statuses: 'وضعیت‌های پیش‌فرض پروژه',
  risk_levels: 'سطوح ریسک',
  backlog_types: 'نوع‌های بک‌لاگ',
  backlog_statuses: 'وضعیت‌های بک‌لاگ',
  notification_types: 'نوع‌های اعلان',
  smtp_settings: 'تنظیمات SMTP',
  job_titles: 'عنوان‌های شغلی',
  working_days: 'روزهای کاری سازمان',
  organization_timezone: 'منطقه زمانی سازمان',
  default_meeting_reminder_minutes: 'یادآوری پیش‌فرض جلسه',
  meeting_effectiveness_enabled: 'ارزیابی اثربخشی جلسه',
  sprint_health_override_requires_reason: 'الزام دلیل برای تغییر سلامت اسپرینت',
};

const emptySetting = {
  key: '',
  value: '',
  group: 'general',
  type: 'string',
};

const isPlainObject = (value) => value && typeof value === 'object' && !Array.isArray(value);

const inferType = (setting) => {
  if (setting.type) return setting.type;
  if (Array.isArray(setting.value)) return 'list';
  if (isPlainObject(setting.value)) return 'json';
  if (typeof setting.value === 'boolean') return 'boolean';
  if (typeof setting.value === 'number') return 'number';
  if (typeof setting.value === 'string' && setting.value.length > 90) return 'textarea';
  return 'string';
};

const getGroupLabel = (group) => groupMeta[group]?.label || group || 'عمومی';
const getKeyLabel = (key) => keyLabels[key] || key.replaceAll('_', ' ');

const toDraft = (setting) => ({
  value: setting.value ?? '',
  group: setting.group || 'general',
  type: inferType(setting),
});

const normalizeByType = (type, value) => {
  if (type === 'boolean') return value === true || value === 'true';
  if (type === 'number') return value === '' || value === null ? null : Number(value);
  if (type === 'list') return Array.isArray(value) ? value.map(String).filter((item) => item.trim()) : String(value || '').split('\n').map((item) => item.trim()).filter(Boolean);
  if (type === 'json') return isPlainObject(value) ? value : {};
  return value ?? '';
};

const createPayload = (form) => ({
  ...form,
  value: normalizeByType(form.type, form.value),
});

export default function Settings() {
  const [settings, setSettings] = useState([]);
  const [drafts, setDrafts] = useState({});
  const [loading, setLoading] = useState(true);
  const [activeGroup, setActiveGroup] = useState('personalization');
  const [search, setSearch] = useState('');
  const [savingId, setSavingId] = useState(null);
  const [addOpen, setAddOpen] = useState(false);
  const [addForm, setAddForm] = useState(emptySetting);
  const [adding, setAdding] = useState(false);
  const [branding, setBranding] = useState({ company_name: 'مدیریت پروژه', logo_url: null, logo_path: null });
  const [logoUploading, setLogoUploading] = useState(false);

  const fetchSettings = async () => {
    setLoading(true);
    try {
      const { data } = await api.get('/settings');
      const nextSettings = data.data || [];
      setSettings(nextSettings);
      setDrafts(Object.fromEntries(nextSettings.map((setting) => [setting.id, toDraft(setting)])));
      setActiveGroup((current) => current || nextSettings[0]?.group || 'personalization');
      api.get('/branding').then((response) => setBranding(response.data.data || {})).catch(() => {});
    } catch {
      toast.error('خطا در دریافت تنظیمات');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { fetchSettings(); }, []);

  const groups = useMemo(() => {
    const counts = settings.reduce((acc, setting) => {
      const group = setting.group || 'general';
      acc[group] = (acc[group] || 0) + 1;
      return acc;
    }, {});
    return Object.entries(counts)
      .map(([key, count]) => ({ key, count }))
      .sort((a, b) => {
        const aIndex = groupOrder.indexOf(a.key);
        const bIndex = groupOrder.indexOf(b.key);
        return (aIndex === -1 ? 999 : aIndex) - (bIndex === -1 ? 999 : bIndex);
      });
  }, [settings]);

  const navigationGroups = useMemo(() => {
    const guided = [...groups];
    if (!guided.some(({ key }) => key === 'security')) guided.push({ key: 'security', count: 0 });
    return guided.sort((a, b) => {
      const aIndex = groupOrder.indexOf(a.key);
      const bIndex = groupOrder.indexOf(b.key);
      return (aIndex === -1 ? 999 : aIndex) - (bIndex === -1 ? 999 : bIndex);
    });
  }, [groups]);

  const visibleSettings = useMemo(() => {
    const q = search.trim().toLowerCase();
    return settings.filter((setting) => {
      const group = setting.group || 'general';
      const draft = drafts[setting.id] || toDraft(setting);
      const key = setting.key || '';
      const label = getKeyLabel(key);
      const valueText = typeof draft.value === 'string' ? draft.value : JSON.stringify(draft.value || '');
      const matchesGroup = group === activeGroup;
      const matchesSearch = !q || key.toLowerCase().includes(q) || label.toLowerCase().includes(q) || valueText.toLowerCase().includes(q);
      return matchesGroup && matchesSearch;
    });
  }, [settings, drafts, activeGroup, search]);

  const summary = useMemo(() => ({
    total: settings.length,
    groups: groups.length,
    structured: settings.filter((setting) => ['list', 'json'].includes(inferType(setting))).length,
    missingType: settings.filter((setting) => !setting.type).length,
  }), [settings, groups.length]);

  const dirtySettings = useMemo(() => settings.filter((setting) => {
    const original = toDraft(setting);
    const draft = drafts[setting.id] || original;
    return JSON.stringify({
      value: normalizeByType(draft.type, draft.value),
      group: draft.group,
      type: draft.type,
    }) !== JSON.stringify({
      value: normalizeByType(original.type, original.value),
      group: original.group,
      type: original.type,
    });
  }), [settings, drafts]);

  useEffect(() => {
    const warnUnsaved = (event) => {
      if (dirtySettings.length === 0) return;
      event.preventDefault();
      event.returnValue = '';
    };
    window.addEventListener('beforeunload', warnUnsaved);
    return () => window.removeEventListener('beforeunload', warnUnsaved);
  }, [dirtySettings.length]);

  const updateDraft = (id, patch) => {
    setDrafts((prev) => ({ ...prev, [id]: { ...prev[id], ...patch } }));
  };

  const resetSetting = (setting) => {
    updateDraft(setting.id, toDraft(setting));
  };

  const saveSetting = async (setting) => {
    const draft = drafts[setting.id] || toDraft(setting);
    const payload = {
      value: normalizeByType(draft.type, draft.value),
      group: draft.group,
      type: draft.type,
    };
    if (draft.type === 'number' && Number.isNaN(payload.value)) {
      toast.error('مقدار عددی معتبر نیست');
      return;
    }
    setSavingId(setting.id);
    try {
      const { data } = await api.put(`/settings/${setting.id}`, payload);
      const updated = data.data;
      setSettings((prev) => prev.map((item) => (item.id === setting.id ? updated : item)));
      setDrafts((prev) => ({ ...prev, [setting.id]: toDraft(updated) }));
      if (setting.key === 'company_name') {
        setBranding((current) => {
          const next = { ...current, company_name: updated.value || 'مدیریت پروژه' };
          window.dispatchEvent(new CustomEvent('branding:updated', { detail: next }));
          return next;
        });
      }
      toast.success('تنظیم ذخیره شد');
    } catch (err) {
      toast.error(err.response?.data?.message || 'خطا در ذخیره تنظیم');
    } finally {
      setSavingId(null);
    }
  };

  const addSetting = async (e) => {
    e.preventDefault();
    if (!addForm.key.trim()) {
      toast.error('کلید تنظیم الزامی است');
      return;
    }
    setAdding(true);
    try {
      const { data } = await api.post('/settings', createPayload(addForm));
      const created = data.data;
      setSettings((prev) => [...prev, created]);
      setDrafts((prev) => ({ ...prev, [created.id]: toDraft(created) }));
      setActiveGroup(created.group || 'general');
      setAddOpen(false);
      setAddForm(emptySetting);
      toast.success('تنظیم جدید ایجاد شد');
    } catch (err) {
      const firstError = Object.values(err.response?.data?.errors || {})[0]?.[0];
      toast.error(firstError || err.response?.data?.message || 'خطا در ایجاد تنظیم');
    } finally {
      setAdding(false);
    }
  };

  const saveAll = async () => {
    if (dirtySettings.length === 0) return;
    setSavingId('all');
    try {
      await Promise.all(dirtySettings.map((setting) => {
        const draft = drafts[setting.id] || toDraft(setting);
        return api.put(`/settings/${setting.id}`, {
          value: normalizeByType(draft.type, draft.value),
          group: draft.group,
          type: draft.type,
        });
      }));
      await fetchSettings();
      toast.success(`${dirtySettings.length} تنظیم ذخیره شد`);
    } catch (err) {
      toast.error(err.response?.data?.message || 'ذخیره گروهی تنظیمات ناموفق بود');
    } finally {
      setSavingId(null);
    }
  };

  const applyBrandingResponse = ({ setting, branding: nextBranding }) => {
    if (setting) {
      setSettings((current) => current.map((item) => (item.key === 'company_logo' ? setting : item)));
      setDrafts((current) => ({ ...current, [setting.id]: toDraft(setting) }));
    }
    setBranding(nextBranding || {});
    window.dispatchEvent(new CustomEvent('branding:updated', { detail: nextBranding || {} }));
  };

  const uploadCompanyLogo = async (file) => {
    if (!file) return;
    const formData = new FormData();
    formData.append('logo', file);
    setLogoUploading(true);
    try {
      const { data } = await api.post('/settings/company-logo', formData, { headers: { 'Content-Type': 'multipart/form-data' } });
      applyBrandingResponse(data.data);
      toast.success('لوگوی شرکت بارگذاری شد');
    } catch (error) {
      const firstError = Object.values(error.response?.data?.errors || {})[0]?.[0];
      toast.error(firstError || error.response?.data?.message || 'بارگذاری لوگو ناموفق بود');
    } finally {
      setLogoUploading(false);
    }
  };

  const removeCompanyLogo = async () => {
    setLogoUploading(true);
    try {
      const { data } = await api.delete('/settings/company-logo');
      applyBrandingResponse(data.data);
      toast.success('لوگوی شرکت حذف شد');
    } catch (error) {
      toast.error(error.response?.data?.message || 'حذف لوگو ناموفق بود');
    } finally {
      setLogoUploading(false);
    }
  };

  const activeGroupTitle = activeGroup === 'personalization' ? 'شخصی‌سازی' : getGroupLabel(activeGroup);

  return (
    <div className="page-container settings-page">
      <div className="page-header settings-header">
        <div>
          <h1>مرکز تنظیمات</h1>
          <p className="settings-subtitle">تنظیمات شخصی و سیاست‌های سازمان را با کنترل‌های روشن و قابل بازگشت مدیریت کنید.</p>
        </div>
        <div className="settings-header-actions">
          <button className="btn btn-primary" onClick={() => setAddOpen(true)}><Plus size={16} /> تنظیم جدید</button>
        </div>
      </div>

      <div className="settings-summary">
        <SummaryItem label="کل تنظیمات" value={summary.total} icon={SettingsIcon} />
        <SummaryItem label="گروه‌ها" value={summary.groups} icon={Database} />
        <SummaryItem label="ساختاری" value={summary.structured} icon={ListChecks} />
        <SummaryItem label="بدون نوع ثبت‌شده" value={summary.missingType} icon={ShieldCheck} />
      </div>

      <div className="settings-shell">
        <aside className="settings-nav">
          <button className={`settings-nav-item ${activeGroup === 'personalization' ? 'active' : ''}`} onClick={() => setActiveGroup('personalization')}>
            <span><SlidersHorizontal size={16} /> شخصی‌سازی</span>
          </button>
          {navigationGroups.map(({ key, count }) => {
            const Icon = groupMeta[key]?.icon || SlidersHorizontal;
            return (
              <button key={key} className={`settings-nav-item ${activeGroup === key ? 'active' : ''}`} onClick={() => setActiveGroup(key)}>
                <span><Icon size={16} /> {getGroupLabel(key)}</span>
                {count > 0 && <strong>{count.toLocaleString('fa-IR')}</strong>}
              </button>
            );
          })}
        </aside>

        <main className="settings-main">
          <div className="settings-toolbar">
            <div>
              <h2>{activeGroupTitle}</h2>
              <span>{groupDescriptions[activeGroup] || `${visibleSettings.length} مورد`}</span>
            </div>
            {activeGroup !== 'personalization' && activeGroup !== 'security' && <div className="settings-search">
              <Search size={16} />
              <input className="form-input" value={search} onChange={(e) => setSearch(e.target.value)} placeholder="جستجو در عنوان، کلید یا مقدار" />
            </div>}
          </div>

          {activeGroup === 'personalization' ? (
            <AppearancePanel />
          ) : activeGroup === 'security' ? (
            <SecurityPanel />
          ) : loading ? (
            <div className="settings-list">
              {[1, 2, 3, 4].map((item) => <div key={item} className="skeleton settings-skeleton" />)}
            </div>
          ) : visibleSettings.length === 0 ? (
            <div className="settings-empty">
              <SettingsIcon size={34} />
              <strong>تنظیمی یافت نشد</strong>
              <span>فیلتر یا عبارت جستجو را تغییر دهید.</span>
            </div>
          ) : (
            <div className="settings-list">
              {visibleSettings.map((setting) => (
                <SettingRow
                  key={setting.id}
                  setting={setting}
                  draft={drafts[setting.id] || toDraft(setting)}
                  saving={savingId === setting.id}
                  onChange={(patch) => updateDraft(setting.id, patch)}
                  onReset={() => resetSetting(setting)}
                  onSave={() => saveSetting(setting)}
                  logoProps={{ branding, uploading: logoUploading, onUpload: uploadCompanyLogo, onRemove: removeCompanyLogo }}
                />
              ))}
            </div>
          )}
        </main>
      </div>

      {dirtySettings.length > 0 && (
        <div className="settings-unsaved-bar" role="status">
          <div><strong>{dirtySettings.length} تغییر ذخیره‌نشده</strong><span>تغییرات تا زمان ذخیره روی سازمان اعمال نمی‌شوند.</span></div>
          <div><button type="button" className="btn btn-secondary" onClick={() => setDrafts(Object.fromEntries(settings.map((setting) => [setting.id, toDraft(setting)])))}>لغو تغییرات</button><button type="button" className="btn btn-primary" onClick={saveAll} disabled={savingId === 'all'}><Save size={16} /> {savingId === 'all' ? 'در حال ذخیره...' : 'ذخیره همه'}</button></div>
        </div>
      )}

      {addOpen && (
        <Modal
          title="تنظیم جدید"
          size="lg"
          onClose={() => !adding && setAddOpen(false)}
          footer={<><button type="button" className="btn btn-secondary" onClick={() => setAddOpen(false)} disabled={adding}>انصراف</button><button type="submit" form="advanced-setting-form" className="btn btn-primary" disabled={adding}><Save size={16} /> {adding ? 'در حال ذخیره...' : 'ذخیره'}</button></>}
        >
          <form id="advanced-setting-form" className="settings-add-form" onSubmit={addSetting}>
            <Field label="کلید">
              <input className="form-input" value={addForm.key} onChange={(e) => setAddForm({ ...addForm, key: e.target.value })} placeholder="example_setting_key" />
            </Field>
            <div className="grid grid-2">
              <Field label="گروه">
                <input className="form-input" value={addForm.group} onChange={(e) => setAddForm({ ...addForm, group: e.target.value })} list="settings-groups" />
                <datalist id="settings-groups">
                  {Object.keys(groupMeta).map((group) => <option key={group} value={group} />)}
                  {groups.map(({ key }) => <option key={key} value={key} />)}
                </datalist>
              </Field>
              <Field label="نوع">
                <select className="form-select" value={addForm.type} onChange={(e) => setAddForm({ ...addForm, type: e.target.value, value: e.target.value === 'list' ? [] : e.target.value === 'json' ? {} : '' })}>
                  {Object.entries(typeLabels).map(([key, label]) => <option key={key} value={key}>{label}</option>)}
                </select>
              </Field>
            </div>
            <Field label="مقدار">
              <AddValueEditor form={addForm} onChange={(value) => setAddForm({ ...addForm, value })} />
            </Field>
          </form>
        </Modal>
      )}
    </div>
  );
}

function AppearancePanel() {
  const [mode, setMode] = useState(getThemeMode);

  useEffect(() => {
    applyThemeMode(mode);
  }, [mode]);

  return (
    <section className="settings-appearance-panel">
      <div>
        <strong>ظاهر سامانه</strong>
      </div>
      <div className="settings-appearance-controls">
        <label>
          <span>حالت نمایش</span>
          <select className="form-select" value={mode} onChange={(e) => setMode(e.target.value)}>
            {themeModes.map((item) => <option key={item.key} value={item.key}>{item.label}</option>)}
          </select>
        </label>
        <ThemeAccentPicker label="رنگ‌بندی" />
      </div>
    </section>
  );
}

function SecurityPanel() {
  return (
    <section className="settings-security-panel">
      <div className="settings-guidance-icon"><ShieldCheck size={24} /></div>
      <div>
        <strong>امنیت و دسترسی‌ها</strong>
        <p>مدیریت نقش‌ها از تنظیمات سازمانی جدا شده تا تغییرات حساس با دسترسی مناسب انجام شوند.</p>
      </div>
      <div className="settings-security-actions">
        <Link className="btn btn-primary" to="/roles"><ShieldCheck size={16} /> نقش‌ها و دسترسی‌ها</Link>
        <Link className="btn btn-secondary" to="/profile"><UserRound size={16} /> امنیت حساب من</Link>
      </div>
    </section>
  );
}

function SummaryItem({ label, value, icon: Icon }) {
  return (
    <div className="settings-stat">
      <Icon size={18} />
      <span>{label}</span>
      <strong>{value}</strong>
    </div>
  );
}

function SettingRow({ setting, draft, saving, onChange, onReset, onSave, logoProps }) {
  const originalType = inferType(setting);
  const hasChanged = JSON.stringify({
    value: normalizeByType(draft.type, draft.value),
    group: draft.group,
    type: draft.type,
  }) !== JSON.stringify({
    value: normalizeByType(originalType, setting.value ?? ''),
    group: setting.group || 'general',
    type: originalType,
  });

  return (
    <section className="settings-item">
      <div className="settings-item-head">
        <div className="settings-item-title">
          <strong>{getKeyLabel(setting.key)}</strong>
          <p>{keyDescriptions[setting.key] || 'مقدار این تنظیم را متناسب با سیاست‌های سازمان انتخاب کنید.'}</p>
        </div>
      </div>

      <div className="settings-editor-grid guided">
        <div className="settings-editor">
          <GuidedValueEditor settingKey={setting.key} type={draft.type} value={draft.value} onChange={(value) => onChange({ value })} logoProps={logoProps} />
        </div>
      </div>

      <details className="settings-technical-details">
        <summary><Wrench size={16} /> جزئیات فنی</summary>
        <div className="settings-technical-grid">
          <Field label="کلید تنظیم">
            <input className="form-input" dir="ltr" value={setting.key} readOnly />
          </Field>
          <Field label="گروه">
            <input className="form-input" value={draft.group} onChange={(e) => onChange({ group: e.target.value })} />
          </Field>
          <Field label="نوع مقدار">
            <select className="form-select" value={draft.type} onChange={(e) => onChange({ type: e.target.value, value: normalizeByType(e.target.value, draft.value) })}>
              {Object.entries(typeLabels).map(([key, label]) => <option key={key} value={key}>{label}</option>)}
            </select>
          </Field>
          {setting.key !== 'company_logo' && <Field label="ویرایش مقدار خام">
            <ValueEditor type={draft.type} value={draft.value} onChange={(value) => onChange({ value })} />
          </Field>}
        </div>
      </details>

      <div className="settings-actions">
        <button className="btn btn-secondary btn-sm" onClick={onReset} disabled={!hasChanged}>بازنشانی</button>
        <button className="btn btn-primary btn-sm" onClick={onSave} disabled={!hasChanged || saving}>
          {saving ? <Check size={15} /> : <Save size={15} />}
          {saving ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
        </button>
      </div>
    </section>
  );
}

function GuidedValueEditor({ settingKey, type, value, onChange, logoProps }) {
  if (settingKey === 'company_logo') {
    return <CompanyLogoEditor {...logoProps} />;
  }

  if (choiceOptions[settingKey]) {
    return <ChoiceListEditor options={choiceOptions[settingKey]} value={Array.isArray(value) ? value : []} onChange={onChange} />;
  }

  if (settingKey === 'smtp_settings') {
    return <SmtpEditor value={isPlainObject(value) ? value : {}} onChange={onChange} />;
  }

  if (settingKey === 'organization_timezone') {
    const timezones = ['Asia/Tehran', 'Asia/Dubai', 'Europe/Istanbul', 'UTC'];
    const options = timezones.includes(value) ? timezones : [value, ...timezones].filter(Boolean);
    return <select className="form-select" value={value || 'Asia/Tehran'} onChange={(e) => onChange(e.target.value)}>{options.map((timezone) => <option key={timezone} value={timezone}>{timezone}</option>)}</select>;
  }

  if (settingKey === 'company_address') {
    return <textarea className="form-textarea settings-textarea" value={value ?? ''} onChange={(e) => onChange(e.target.value)} />;
  }

  if (settingKey === 'company_phone') {
    return <input className="form-input" type="tel" dir="ltr" value={value ?? ''} onChange={(e) => onChange(e.target.value)} placeholder="021-00000000" />;
  }

  if (settingKey === 'default_meeting_reminder_minutes') {
    return <div className="settings-input-with-suffix"><input className="form-input" type="number" min="0" max="10080" value={value ?? ''} onChange={(e) => onChange(e.target.value)} /><span>دقیقه قبل</span></div>;
  }

  return <ValueEditor type={type} value={value} onChange={onChange} />;
}

function CompanyLogoEditor({ branding, uploading, onUpload, onRemove }) {
  const inputRef = useRef(null);
  return (
    <div className="company-logo-editor">
      <div className="company-logo-preview">
        {branding?.logo_url
          ? <img src={branding.logo_url} alt={`لوگوی ${branding.company_name || 'شرکت'}`} />
          : <ImageIcon size={30} aria-hidden="true" />}
      </div>
      <div className="company-logo-copy">
        <strong>{branding?.logo_url ? 'لوگوی فعلی شرکت' : 'هنوز لوگویی بارگذاری نشده است'}</strong>
        <span>فرمت‌های PNG، JPG و WebP تا حداکثر ۲ مگابایت پذیرفته می‌شوند.</span>
        <div>
          <input
            ref={inputRef}
            type="file"
            accept="image/png,image/jpeg,image/webp"
            hidden
            onChange={(event) => {
              onUpload(event.target.files?.[0]);
              event.target.value = '';
            }}
          />
          <button type="button" className="btn btn-primary" disabled={uploading} onClick={() => inputRef.current?.click()}>
            <UploadCloud size={16} /> {uploading ? 'در حال بارگذاری...' : branding?.logo_url ? 'تعویض لوگو' : 'انتخاب و بارگذاری لوگو'}
          </button>
          {branding?.logo_url && <button type="button" className="btn btn-danger" disabled={uploading} onClick={onRemove}>حذف لوگو</button>}
        </div>
      </div>
    </div>
  );
}

function ChoiceListEditor({ options, value, onChange }) {
  const knownValues = options.map(([key]) => key);
  const mergedOptions = [
    ...options,
    ...value.filter((item) => !knownValues.includes(item)).map((item) => [item, item]),
  ];

  const toggle = (key) => {
    if (value.includes(key)) onChange(value.filter((item) => item !== key));
    else onChange([...value, key]);
  };

  return (
    <div className="settings-choice-grid">
      {mergedOptions.map(([key, label]) => (
        <label key={key} className={value.includes(key) ? 'selected' : ''}>
          <input type="checkbox" checked={value.includes(key)} onChange={() => toggle(key)} />
          <span>{label}</span>
          {value.includes(key) && <Check size={15} />}
        </label>
      ))}
    </div>
  );
}

function SmtpEditor({ value, onChange }) {
  const update = (key, nextValue) => onChange({ ...value, [key]: nextValue });
  return (
    <div className="settings-smtp-grid">
      <Field label="آدرس سرور">
        <input className="form-input" dir="ltr" value={value.host || ''} onChange={(e) => update('host', e.target.value)} placeholder="smtp.example.com" />
      </Field>
      <Field label="پورت">
        <input className="form-input" type="number" min="1" max="65535" value={value.port || ''} onChange={(e) => update('port', Number(e.target.value))} />
      </Field>
      <Field label="رمزگذاری">
        <select className="form-select" value={value.encryption || 'tls'} onChange={(e) => update('encryption', e.target.value)}><option value="tls">TLS</option><option value="ssl">SSL</option><option value="none">بدون رمزگذاری</option></select>
      </Field>
      <Field label="ایمیل فرستنده">
        <input className="form-input" type="email" dir="ltr" value={value.from_address || ''} onChange={(e) => update('from_address', e.target.value)} placeholder="no-reply@example.com" />
      </Field>
    </div>
  );
}

function ValueEditor({ type, value, onChange }) {
  if (type === 'boolean') {
    const checked = value === true || value === 'true';
    return (
      <div className="settings-toggle" role="group">
        <button className={checked ? 'active' : ''} onClick={() => onChange(true)} type="button">فعال</button>
        <button className={!checked ? 'active' : ''} onClick={() => onChange(false)} type="button">غیرفعال</button>
      </div>
    );
  }

  if (type === 'number') {
    return <input className="form-input" type="number" value={value ?? ''} onChange={(e) => onChange(e.target.value)} />;
  }

  if (type === 'textarea') {
    return <textarea className="form-textarea settings-textarea" value={value ?? ''} onChange={(e) => onChange(e.target.value)} />;
  }

  if (type === 'list') {
    const items = Array.isArray(value) ? value : [];
    return <ListEditor items={items} onChange={onChange} />;
  }

  if (type === 'json') {
    const objectValue = isPlainObject(value) ? value : {};
    return <ObjectEditor value={objectValue} onChange={onChange} />;
  }

  return <input className="form-input" value={value ?? ''} onChange={(e) => onChange(e.target.value)} />;
}

function AddValueEditor({ form, onChange }) {
  if (form.type === 'list') return <ListEditor items={Array.isArray(form.value) ? form.value : []} onChange={onChange} />;
  if (form.type === 'json') return <ObjectEditor value={isPlainObject(form.value) ? form.value : {}} onChange={onChange} />;
  return <ValueEditor type={form.type} value={form.value} onChange={onChange} />;
}

function ListEditor({ items, onChange }) {
  const rowIds = useRef([]);
  const nextRowId = useRef(1);

  if (rowIds.current.length < items.length) {
    rowIds.current = [
      ...rowIds.current,
      ...Array.from({ length: items.length - rowIds.current.length }, () => nextRowId.current++),
    ];
  } else if (rowIds.current.length > items.length) {
    rowIds.current = rowIds.current.slice(0, items.length);
  }

  const updateItem = (index, value) => {
    onChange(items.map((item, itemIndex) => (itemIndex === index ? value : item)));
  };
  const removeItem = (index) => {
    rowIds.current = rowIds.current.filter((_, itemIndex) => itemIndex !== index);
    onChange(items.filter((_, itemIndex) => itemIndex !== index));
  };
  const addItem = () => {
    rowIds.current = [...rowIds.current, nextRowId.current++];
    onChange([...items, '']);
  };

  return (
    <div className="settings-list-editor">
      {items.map((item, index) => (
        <div className="settings-list-row" key={rowIds.current[index]}>
          <input className="form-input" value={item} onChange={(e) => updateItem(index, e.target.value)} />
          <button type="button" className="settings-icon-btn danger" onClick={() => removeItem(index)} title="حذف">
            <Trash2 size={15} />
          </button>
        </div>
      ))}
      <button type="button" className="settings-add-row" onClick={addItem}>
        <Plus size={15} />
        افزودن مورد
      </button>
    </div>
  );
}

function ObjectEditor({ value, onChange }) {
  const rows = Object.entries(value);
  const updateKey = (oldKey, nextKey) => {
    if (!nextKey.trim()) return;
    const next = {};
    rows.forEach(([key, val]) => {
      next[key === oldKey ? nextKey : key] = val;
    });
    onChange(next);
  };
  const updateValue = (key, nextValue) => {
    onChange({ ...value, [key]: nextValue });
  };
  const removeKey = (key) => {
    const next = { ...value };
    delete next[key];
    onChange(next);
  };
  const addKey = () => {
    let index = rows.length + 1;
    let key = `field_${index}`;
    while (Object.prototype.hasOwnProperty.call(value, key)) {
      index += 1;
      key = `field_${index}`;
    }
    onChange({ ...value, [key]: '' });
  };

  return (
    <div className="settings-object-editor">
      {rows.map(([key, val]) => (
        <div className="settings-object-row" key={key}>
          <input className="form-input" value={key} onChange={(e) => updateKey(key, e.target.value)} />
          <ChevronLeft size={15} />
          <input className="form-input" value={val ?? ''} onChange={(e) => updateValue(key, e.target.value)} />
          <button type="button" className="settings-icon-btn danger" onClick={() => removeKey(key)} title="حذف">
            <Trash2 size={15} />
          </button>
        </div>
      ))}
      <button type="button" className="settings-add-row" onClick={addKey}>
        <Plus size={15} />
        افزودن فیلد
      </button>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div className="form-group">
      <label className="form-label">{label}</label>
      {children}
    </div>
  );
}
