import { MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { DataTableCard, type DataTableColumn, type DataTableFilter } from '../../components/data-table';
import { useToast } from '../../components/toast';
import { Button, Modal } from '../../components/ui';
import { PageTitle } from '../../layout/AppLayout';
import { formatDateTime } from '../../lib/date-format';
import { listApps } from '../applications/application-api';
import {
  createLauncherNotice,
  deleteLauncherNotice,
  loadLauncherNotices,
  updateLauncherNotice,
  type LauncherNotice
} from './operations-api';
import { LoadingModal, StatusBadge, useMinimumLoading } from './operation-utils';
import type { AppWithComponents } from '../../types/application';

type NoticeForm = {
  appKey: string;
  title: string;
  body: string;
  linkUrl: string;
  exposureEnabled: boolean;
  startsAt: string;
  endsAt: string;
  priority: string;
  isActive: boolean;
};

const emptyForm: NoticeForm = {
  appKey: 'Launcher',
  title: '',
  body: '',
  linkUrl: '',
  exposureEnabled: false,
  startsAt: '',
  endsAt: '',
  priority: '0',
  isActive: true
};

function formatNoticeDateTime(value?: string | null) {
  return formatDateTime(value);
}

function toDateTimeInputValue(value?: string | null) {
  if (!value) return '';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '';
  const yyyy = date.getFullYear();
  const mm = String(date.getMonth() + 1).padStart(2, '0');
  const dd = String(date.getDate()).padStart(2, '0');
  const hh = String(date.getHours()).padStart(2, '0');
  const mi = String(date.getMinutes()).padStart(2, '0');
  return `${yyyy}-${mm}-${dd}T${hh}:${mi}`;
}

function toApiDateTime(value: string) {
  return value ? new Date(value).toISOString() : undefined;
}

function exposureCell(row: LauncherNotice) {
  if (!row.startsAt && !row.endsAt) {
    return <span className="text-muted-foreground">상시</span>;
  }

  return (
    <div className="min-w-40 text-xs leading-5 text-muted-foreground">
      <p>{row.startsAt ? formatNoticeDateTime(row.startsAt) : '-'}</p>
      <p>~ {row.endsAt ? formatNoticeDateTime(row.endsAt) : '-'}</p>
    </div>
  );
}

function NoticeCreator({ notice }: { notice: LauncherNotice }) {
  const [failed, setFailed] = useState(false);
  const name = notice.createdByName || notice.createdByEmail || 'admin';
  const avatarUrl = notice.createdByAvatarUrl || '';
  const initial = name.trim().charAt(0).toUpperCase() || 'A';

  return (
    <div className="flex min-w-0 items-center gap-2">
      {avatarUrl && !failed ? (
        <img
          src={avatarUrl}
          alt=""
          className="size-7 shrink-0 rounded-full border border-border bg-muted object-cover"
          onError={() => setFailed(true)}
        />
      ) : (
        <span className="inline-flex size-7 shrink-0 items-center justify-center rounded-full border border-border bg-muted text-xs font-semibold text-muted-foreground">
          {initial}
        </span>
      )}
      <div className="min-w-0">
        <p className="truncate text-sm font-medium text-foreground">{name}</p>
        <p className="mt-0.5 whitespace-nowrap text-xs text-muted-foreground">{formatNoticeDateTime(notice.createdAt)}</p>
      </div>
    </div>
  );
}

function toForm(notice: LauncherNotice): NoticeForm {
  return {
    appKey: notice.appKey,
    title: notice.title,
    body: notice.body,
    linkUrl: notice.linkUrl ?? '',
    exposureEnabled: Boolean(notice.startsAt || notice.endsAt),
    startsAt: toDateTimeInputValue(notice.startsAt),
    endsAt: toDateTimeInputValue(notice.endsAt),
    priority: String(notice.priority ?? 0),
    isActive: notice.isActive
  };
}

function isLauncherNoticeKey(appKey: string) {
  return appKey.toLowerCase() === 'launcher' || appKey.toLowerCase() === 'login';
}

export function NoticesPage() {
  const { toast } = useToast();
  const [notices, setNotices] = useState<LauncherNotice[]>([]);
  const [apps, setApps] = useState<AppWithComponents[]>([]);
  const [loading, setLoading] = useState(true);
  const [failed, setFailed] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<LauncherNotice | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<LauncherNotice | null>(null);
  const [menuNotice, setMenuNotice] = useState<{ id: string; x: number; y: number } | null>(null);
  const [form, setForm] = useState<NoticeForm>(emptyForm);
  const [saving, setSaving] = useState(false);
  const loadingVisible = useMinimumLoading(loading);

  const refresh = () => {
    setLoading(true);
    Promise.all([
      loadLauncherNotices(),
      listApps().catch(() => [])
    ])
      .then(([items, appItems]) => {
        setNotices(items);
        setApps(appItems);
        setFailed(false);
      })
      .catch((error: Error) => {
        setNotices([]);
        setFailed(true);
        toast({ type: 'error', title: '공지사항 조회 실패', message: error.message });
      })
      .finally(() => setLoading(false));
  };

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

  useEffect(() => {
    if (!menuNotice) return;

    const close = () => setMenuNotice(null);
    const closeOnEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') setMenuNotice(null);
    };

    window.addEventListener('click', close);
    window.addEventListener('keydown', closeOnEscape);
    return () => {
      window.removeEventListener('click', close);
      window.removeEventListener('keydown', closeOnEscape);
    };
  }, [menuNotice]);

  const appNameByKey = useMemo(() => {
    const map = new Map<string, string>([
      ['launcher', 'Launcher'],
      ['login', 'Launcher']
    ]);
    apps.forEach((app) => map.set(app.key, app.name));
    return map;
  }, [apps]);

  const appLabel = (appKey: string) => appNameByKey.get(appKey) ?? appKey;

  const rows = useMemo(
    () => notices.map((notice, index) => ({ ...notice, no: notices.length - index, appName: appLabel(notice.appKey) })),
    [appNameByKey, notices]
  );

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

  const openEdit = (notice: LauncherNotice) => {
    setMenuNotice(null);
    setEditing(notice);
    setForm(toForm(notice));
    setModalOpen(true);
  };

  const closeModal = () => {
    setModalOpen(false);
    setEditing(null);
    setForm(emptyForm);
  };

  const payload = () => ({
    appKey: form.appKey.trim(),
    title: form.title.trim(),
    body: form.body.trim(),
    linkUrl: form.linkUrl.trim(),
    startsAt: form.exposureEnabled ? toApiDateTime(form.startsAt) : undefined,
    endsAt: form.exposureEnabled ? toApiDateTime(form.endsAt) : undefined,
    priority: Number(form.priority) || 0,
    isActive: form.isActive
  });

  const submit = () => {
    if (!form.appKey.trim() || !form.title.trim() || !form.body.trim()) return;
    setSaving(true);
    const request = editing
      ? updateLauncherNotice(editing.id, payload())
      : createLauncherNotice(payload());

    request
      .then(() => {
        toast({ type: 'success', message: editing ? '공지사항을 수정했습니다.' : '공지사항을 등록했습니다.' });
        closeModal();
        refresh();
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: editing ? '공지사항 수정 실패' : '공지사항 등록 실패', message: error.message });
      })
      .finally(() => setSaving(false));
  };

  const removeNotice = (notice: LauncherNotice) => {
    setMenuNotice(null);
    setDeleteTarget(notice);
  };

  const confirmRemoveNotice = () => {
    if (!deleteTarget) return;
    setSaving(true);
    deleteLauncherNotice(deleteTarget.id)
      .then(() => {
        toast({ type: 'success', message: '공지사항을 삭제했습니다.' });
        setDeleteTarget(null);
        closeModal();
        refresh();
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '공지사항 삭제 실패', message: error.message });
      })
      .finally(() => setSaving(false));
  };

  const columns = useMemo<Array<DataTableColumn<(typeof rows)[number]>>>(
    () => [
      { key: 'no', header: 'No.', className: 'w-14 px-3 py-3 text-center font-medium', cell: (row) => <span className="block text-center font-semibold">{row.no}</span> },
      {
        key: 'title',
        header: '공지',
        className: 'w-[300px] px-5 py-3 font-medium',
        cell: (row) => (
          <div>
            <p className="truncate">{row.title}</p>
            <p className="mt-1 max-w-[320px] truncate text-xs text-muted-foreground">{row.body}</p>
          </div>
        )
      },
      { key: 'appKey', header: '대상 앱', cell: (row) => <StatusBadge status={row.appName} tone={isLauncherNoticeKey(row.appKey) ? 'violet' : 'blue'} /> },
      { key: 'exposure', header: '노출 일시', className: 'w-48 px-5 py-3 font-medium', cell: exposureCell },
      { key: 'createdAt', header: '생성', className: 'w-48 px-5 py-3', cell: (row) => <NoticeCreator notice={row} /> },
      {
        key: 'actions',
        header: '',
        className: 'w-20 px-5 py-3 font-medium',
        cell: (row) => (
          <div className="relative flex justify-end">
            <Button
              variant="ghost"
              className="size-8 px-0"
              title="메뉴"
              aria-label="메뉴"
              onClick={(event) => {
                event.stopPropagation();
                const rect = event.currentTarget.getBoundingClientRect();
                setMenuNotice((prev) => (prev?.id === row.id ? null : { id: row.id, x: rect.right, y: rect.bottom + 6 }));
              }}
            >
              <MoreHorizontal className="size-4" />
            </Button>
          </div>
        )
      }
    ],
    [menuNotice?.id]
  );

  const filters = useMemo<Array<DataTableFilter<(typeof rows)[number]>>>(
    () => [
      { key: 'appKey', label: '대상 앱', options: [...new Set(rows.map((row) => row.appKey))].map((appKey) => ({ label: appLabel(appKey), value: appKey })), getValue: (row) => row.appKey }
    ],
    [rows]
  );

  return (
    <>
      <PageTitle
        eyebrow="운영"
        title="공지사항"
        description="런처와 앱 화면에 노출할 공지사항을 관리합니다."
        actions={
          <Button className="h-8 px-3 text-[13px]" onClick={openCreate}>
            <Plus className="size-4" />
            추가
          </Button>
        }
      />
      {failed ? (
        <div className="mb-4 rounded-md border border-rose-500/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">
          공지사항 데이터를 불러오지 못했습니다.
        </div>
      ) : null}
      <DataTableCard
        title="목록"
        rows={rows}
        columns={columns}
        filters={filters}
        searchPlaceholder="공지 제목, 대상 앱, 링크 검색"
        getSearchText={(row) => `${row.title} ${row.body} ${row.appKey} ${row.appName} ${row.linkUrl ?? ''} ${row.status ?? ''}`}
        getRowKey={(row) => row.id}
        pageSize={6}
        minWidth={1040}
        loading={loading}
        emptyMessage="등록된 공지사항이 없습니다."
      />

      {menuNotice ? (() => {
        const row = rows.find((item) => item.id === menuNotice.id);
        if (!row) return null;
        return (
          <div onClick={(event) => event.stopPropagation()} className="fixed z-[70] min-w-28 overflow-hidden rounded-md border border-border bg-card py-1 text-left shadow-xl" style={{ left: menuNotice.x, top: menuNotice.y, transform: 'translateX(-100%)' }}>
            <button
              type="button"
              className="block w-full px-3 py-2 text-left text-xs text-foreground hover:bg-muted"
              onClick={() => openEdit(row)}
            >
              수정
            </button>
            <button
              type="button"
              className="block w-full px-3 py-2 text-left text-xs text-rose-300 hover:bg-rose-500/10"
              onClick={() => removeNotice(row)}
            >
              삭제
            </button>
          </div>
        );
      })() : null}

      <Modal
        open={modalOpen}
        title={
          <span className="inline-flex items-center gap-2">
            <Pencil className="size-4 text-primary" />
            {editing ? '공지사항 수정' : '공지사항 추가'}
          </span>
        }
        onClose={closeModal}
        className="!max-w-2xl"
        footer={
          <>
            <Button variant="outline" onClick={closeModal} disabled={saving}>취소</Button>
            <Button onClick={submit} disabled={saving || !form.appKey.trim() || !form.title.trim() || !form.body.trim()}>
              {saving ? '저장 중' : '저장'}
            </Button>
          </>
        }
      >
        <form className="grid gap-4" onSubmit={(event) => { event.preventDefault(); submit(); }}>
          <div className="grid gap-4 md:grid-cols-[1fr_120px]">
            <label className="block">
              <span className="text-xs font-medium text-muted-foreground">대상 앱 <b className="text-foreground">*</b></span>
              <select 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.appKey} onChange={(event) => setForm((prev) => ({ ...prev, appKey: event.target.value }))}>
                <option value="Launcher">Launcher</option>
                {apps.map((app) => (
                  <option key={app.id} value={app.key}>{app.name}</option>
                ))}
              </select>
            </label>
            <label className="block">
              <span className="text-xs font-medium text-muted-foreground">게시 여부</span>
              <span className="mt-2 inline-flex h-9 w-full items-center gap-2 rounded-md border border-border px-3 text-sm text-foreground">
                <input type="checkbox" checked={form.isActive} onChange={(event) => setForm((prev) => ({ ...prev, isActive: event.target.checked }))} />
                게시
              </span>
            </label>
          </div>
          <label className="block">
            <span className="text-xs font-medium text-muted-foreground">제목 <b className="text-foreground">*</b></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.title} onChange={(event) => setForm((prev) => ({ ...prev, title: event.target.value }))} />
          </label>
          <label className="block">
            <span className="text-xs font-medium text-muted-foreground">본문 <b className="text-foreground">*</b></span>
            <textarea className="mt-2 min-h-24 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.body} onChange={(event) => setForm((prev) => ({ ...prev, body: event.target.value }))} />
          </label>
          <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.linkUrl} onChange={(event) => setForm((prev) => ({ ...prev, linkUrl: event.target.value }))} />
          </label>
          <div className="rounded-md border border-border bg-muted/20 p-3">
            <label className="inline-flex items-center gap-2 text-sm font-medium text-foreground">
              <input
                type="checkbox"
                checked={form.exposureEnabled}
                onChange={(event) => setForm((prev) => ({
                  ...prev,
                  exposureEnabled: event.target.checked,
                  startsAt: event.target.checked ? prev.startsAt : '',
                  endsAt: event.target.checked ? prev.endsAt : ''
                }))}
              />
              노출기간 설정
            </label>
            {form.exposureEnabled ? (
              <div className="mt-3 grid gap-4 md:grid-cols-2">
                <label className="block">
                  <span className="text-xs font-medium text-muted-foreground">노출 시작 일시</span>
                  <input type="datetime-local" 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.startsAt} onChange={(event) => setForm((prev) => ({ ...prev, startsAt: event.target.value }))} />
                </label>
                <label className="block">
                  <span className="text-xs font-medium text-muted-foreground">노출 종료 일시</span>
                  <input type="datetime-local" 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.endsAt} onChange={(event) => setForm((prev) => ({ ...prev, endsAt: event.target.value }))} />
                </label>
              </div>
            ) : null}
          </div>
        </form>
      </Modal>

      <Modal
        open={Boolean(deleteTarget)}
        title={
          <span className="inline-flex items-center gap-2">
            <Trash2 className="size-4 text-rose-300" />
            공지사항 삭제
          </span>
        }
        onClose={() => setDeleteTarget(null)}
        footer={
          <>
            <Button variant="outline" onClick={() => setDeleteTarget(null)} disabled={saving}>취소</Button>
            <Button className="border border-rose-500/40 bg-rose-500/15 text-rose-200 hover:bg-rose-500/25" onClick={confirmRemoveNotice} disabled={saving}>
              {saving ? '삭제 중' : '삭제'}
            </Button>
          </>
        }
      >
        <p className="pb-6 text-sm text-foreground">공지사항을 삭제할까요?</p>
      </Modal>

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