import { ChevronLeft, ChevronRight, MoreHorizontal, Plus, SlidersHorizontal, Trash2 } from 'lucide-react';
import { useEffect, useMemo, useState, type FormEvent } from 'react';
import { Badge, Button, Card, CardHeader, Modal } from '../../components/ui';
import { useToast } from '../../components/toast';
import { authApiEndpoints } from '../../data/mock';
import { PageTitle } from '../../layout/AppLayout';
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
import {
  createLauncherCommonSetting,
  deleteLauncherCommonSetting,
  listLauncherCommonSettings,
  updateLauncherCommonSetting,
  type LauncherCommonSetting
} from './launcher-api';

type FormState = {
  key: string;
  name: string;
  type: string;
  value: string;
  description: string;
  isActive: boolean;
  isSecret: boolean;
};

const emptyForm: FormState = {
  key: '',
  name: '',
  type: 'endpoint',
  value: '',
  description: '',
  isActive: true,
  isSecret: false
};

const settingsPageSize = 10;

function maskValue(setting: LauncherCommonSetting) {
  if (!setting.isSecret) return setting.value;
  if (!setting.value) return '-';
  return '******';
}

function toForm(setting?: LauncherCommonSetting): FormState {
  if (!setting) return emptyForm;
  return {
    key: setting.key,
    name: setting.name,
    type: setting.type,
    value: setting.value,
    description: setting.description ?? '',
    isActive: setting.isActive,
    isSecret: setting.isSecret
  };
}

export function LauncherCommonSettingsPage() {
  const { toast } = useToast();
  const [apiOpen, setApiOpen] = useState(false);
  const [settings, setSettings] = useState<LauncherCommonSetting[]>([]);
  const [loading, setLoading] = useState(true);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<LauncherCommonSetting | null>(null);
  const [form, setForm] = useState<FormState>(emptyForm);
  const [saving, setSaving] = useState(false);
  const [page, setPage] = useState(1);
  const loadingVisible = useMinimumLoading(loading);

  const totalPages = Math.max(1, Math.ceil(settings.length / settingsPageSize));
  const pagedSettings = settings.slice((page - 1) * settingsPageSize, page * settingsPageSize);
  const summary = useMemo(() => ({
    total: settings.length,
    endpoint: settings.filter((item) => item.type === 'endpoint').length,
    database: settings.filter((item) => item.type === 'database').length,
    active: settings.filter((item) => item.isActive).length
  }), [settings]);

  const refresh = () => {
    setLoading(true);
    listLauncherCommonSettings()
      .then(setSettings)
      .catch((error: Error) => {
        toast({ type: 'error', title: '공통 설정 조회 실패', message: error.message });
      })
      .finally(() => setLoading(false));
  };

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

  useEffect(() => {
    setPage((currentPage) => Math.min(currentPage, totalPages));
  }, [totalPages]);

  const openCreate = () => {
    setEditing(null);
    setForm(emptyForm);
    setModalOpen(true);
  };

  const openEdit = (setting: LauncherCommonSetting) => {
    setEditing(setting);
    setForm(toForm(setting));
    setModalOpen(true);
  };

  const submit = (event: FormEvent) => {
    event.preventDefault();
    setSaving(true);
    const payload = {
      key: form.key.trim(),
      name: form.name.trim(),
      type: form.type.trim(),
      value: form.value.trim(),
      description: form.description.trim(),
      isActive: form.isActive,
      isSecret: form.isSecret
    };
    const request = editing
      ? updateLauncherCommonSetting(editing.id, payload)
      : createLauncherCommonSetting(payload);

    request
      .then(() => {
        toast({ type: 'success', message: editing ? '설정을 수정했습니다.' : '설정을 추가했습니다.' });
        setModalOpen(false);
        refresh();
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: editing ? '설정 수정 실패' : '설정 추가 실패', message: error.message });
      })
      .finally(() => setSaving(false));
  };

  const remove = () => {
    if (!editing) return;
    setSaving(true);
    deleteLauncherCommonSetting(editing.id)
      .then(() => {
        toast({ type: 'success', message: '설정을 삭제했습니다.' });
        setModalOpen(false);
        refresh();
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '설정 삭제 실패', message: error.message });
      })
      .finally(() => setSaving(false));
  };

  return (
    <>
      <PageTitle
        eyebrow="런처 운영"
        title="공통 설정"
        description="런처에서 공통으로 사용하는 연결값과 기본 설정을 관리합니다."
        actions={
          <>
            <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={() => setApiOpen(true)}>
              <SlidersHorizontal className="size-4" />
              공통 인증 API 보기
            </Button>
            <Button className="h-8 px-3 text-[13px]" onClick={openCreate}>
              <Plus className="size-4" />
              설정 추가
            </Button>
          </>
        }
      />

      <div className="grid gap-4 md:grid-cols-4">
        {[
          ['설정 항목', `${summary.total}개`],
          ['Endpoint', `${summary.endpoint}개`],
          ['Database', `${summary.database}개`],
          ['활성 상태', `${summary.active}개`]
        ].map(([label, value]) => (
          <Card className="p-5" key={label}>
            <p className="text-sm text-muted-foreground">{label}</p>
            <p className="mt-3 text-2xl font-semibold">{value}</p>
          </Card>
        ))}
      </div>

      <Card className="mt-4 min-w-0 overflow-hidden">
        <CardHeader title="런처 연결 설정" description="여러 기능에서 함께 쓰는 주소, 인증, 저장소 관련 값을 정리합니다." />
        <div className="overflow-x-auto">
          <table className="w-full min-w-[1120px] text-left text-sm">
            <thead className="border-b border-border text-xs text-muted-foreground">
              <tr>
                <th className="w-[280px] px-5 py-3 font-medium">설정</th>
                <th className="px-5 py-3 font-medium">Key</th>
                <th className="px-5 py-3 font-medium">Type</th>
                <th className="px-5 py-3 font-medium">Value</th>
                <th className="px-5 py-3 text-right font-medium">관리</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {!loading && settings.length === 0 ? (
                <tr>
                  <td colSpan={5} className="px-5 py-12 text-center text-sm text-muted-foreground">등록된 설정이 없습니다.</td>
                </tr>
              ) : null}
              {pagedSettings.map((setting) => (
                <tr className="hover:bg-muted/20" key={setting.id}>
                  <td className="px-5 py-3">
                    <p className="inline-flex items-center gap-2 font-medium">
                      <span className={setting.isActive ? 'size-2 rounded-full bg-emerald-400' : 'size-2 rounded-full bg-muted-foreground'} />
                      {setting.name}
                    </p>
                    {setting.description ? <p className="mt-1 truncate text-xs text-muted-foreground">{setting.description}</p> : null}
                  </td>
                  <td className="px-5 py-3 font-medium">{setting.key}</td>
                  <td className="px-5 py-3">{setting.type}</td>
                  <td className="px-5 py-3 text-muted-foreground">{maskValue(setting)}</td>
                  <td className="px-5 py-3 text-right">
                    <Button variant="ghost" className="size-8 px-0" aria-label={`${setting.name} 관리`} onClick={() => openEdit(setting)}>
                      <MoreHorizontal className="size-4" />
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="flex items-center justify-between gap-4 border-t border-border px-5 py-3 text-sm">
          <span className="text-xs text-muted-foreground">
            {loading ? '불러오는 중' : `총 ${settings.length}건 · ${page} / ${totalPages}`}
          </span>
          <div className="flex gap-2">
            <Button
              variant="outline"
              className="h-8 px-3 text-[13px]"
              disabled={page <= 1}
              onClick={() => setPage((currentPage) => Math.max(1, currentPage - 1))}
            >
              <ChevronLeft className="size-4" />
              이전
            </Button>
            <Button
              variant="outline"
              className="h-8 px-3 text-[13px]"
              disabled={page >= totalPages}
              onClick={() => setPage((currentPage) => Math.min(totalPages, currentPage + 1))}
            >
              다음
              <ChevronRight className="size-4" />
            </Button>
          </div>
        </div>
      </Card>

      <Modal
        open={modalOpen}
        title={editing ? '설정 수정' : '설정 추가'}
        onClose={() => setModalOpen(false)}
        className="!max-w-2xl"
        footer={
          <>
            {editing ? (
              <Button variant="outline" className="border-rose-500/40 text-rose-300 hover:bg-rose-500/10" onClick={remove} disabled={saving}>
                <Trash2 className="size-4" />
                삭제
              </Button>
            ) : null}
            <Button variant="outline" onClick={() => setModalOpen(false)}>취소</Button>
            <Button onClick={submit as unknown as () => void} disabled={saving || !form.key.trim() || !form.name.trim() || !form.type.trim()}>
              {saving ? '저장 중' : '저장'}
            </Button>
          </>
        }
      >
        <form className="grid gap-4" onSubmit={submit}>
          <div className="grid gap-4 md:grid-cols-2">
            <label className="block">
              <span className="text-xs font-medium text-muted-foreground">설정명</span>
              <input className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={form.name} onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))} />
            </label>
            <label className="block">
              <span className="text-xs font-medium text-muted-foreground">Type</span>
              <input className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={form.type} onChange={(event) => setForm((prev) => ({ ...prev, type: event.target.value }))} />
            </label>
          </div>
          <label className="block">
            <span className="text-xs font-medium text-muted-foreground">Key</span>
            <input className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 font-mono text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={form.key} onChange={(event) => setForm((prev) => ({ ...prev, key: event.target.value }))} />
          </label>
          <label className="block">
            <span className="text-xs font-medium text-muted-foreground">Value</span>
            <input className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 font-mono text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={form.value} onChange={(event) => setForm((prev) => ({ ...prev, value: event.target.value }))} />
          </label>
          <label className="block">
            <span className="text-xs font-medium text-muted-foreground">설명</span>
            <textarea className="mt-2 min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={form.description} onChange={(event) => setForm((prev) => ({ ...prev, description: event.target.value }))} />
          </label>
          <div className="flex flex-wrap gap-4">
            <label className="inline-flex items-center gap-2 text-sm">
              <input type="checkbox" checked={form.isActive} onChange={(event) => setForm((prev) => ({ ...prev, isActive: event.target.checked }))} />
              활성
            </label>
            <label className="inline-flex items-center gap-2 text-sm">
              <input type="checkbox" checked={form.isSecret} onChange={(event) => setForm((prev) => ({ ...prev, isSecret: event.target.checked }))} />
              민감값
            </label>
          </div>
        </form>
      </Modal>

      <Modal open={apiOpen} title="공통 인증 API" onClose={() => setApiOpen(false)} className="!max-w-[1280px]" footer={<Button variant="ghost" onClick={() => setApiOpen(false)}>닫기</Button>}>
        <div className="max-h-[70vh] overflow-x-auto overflow-y-auto">
          <table className="w-full min-w-[980px] text-left text-sm">
            <thead className="sticky top-0 z-10 border-b border-border bg-card text-xs text-muted-foreground">
              <tr>
                <th className="px-5 py-3 font-medium">그룹</th>
                <th className="px-5 py-3 font-medium">Method</th>
                <th className="px-5 py-3 font-medium">Path</th>
                <th className="px-5 py-3 font-medium">용도</th>
                <th className="px-5 py-3 font-medium">권한</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {authApiEndpoints.map((endpoint) => (
                <tr className="hover:bg-muted/20" key={`${endpoint.method}-${endpoint.path}`}>
                  <td className="px-5 py-3">{endpoint.group}</td>
                  <td className="px-5 py-3 font-semibold">{endpoint.method}</td>
                  <td className="px-5 py-3 font-medium">{endpoint.path}</td>
                  <td className="px-5 py-3 text-muted-foreground">{endpoint.purpose}</td>
                  <td className="px-5 py-3">
                    <Badge tone={endpoint.auth === '없음' ? 'neutral' : endpoint.auth === 'ADMIN' ? 'amber' : 'blue'}>{endpoint.auth}</Badge>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Modal>

      <LoadingModal open={loadingVisible} />
    </>
  );
}