import type { ReactNode } from "react";
import { Shield, X } from "lucide-react";

export function SettingRow({ title, desc, action, toggle, checked }: { title: string; desc: string; action?: string; toggle?: boolean; checked?: boolean }) {
  return (
    <div className="setting-row">
      <div><strong>{title}</strong><span>{desc}</span></div>
      {toggle ? <label className="switch"><input type="checkbox" defaultChecked={checked} /><span className="slider" /></label> : <button className="btn btn-sm" type="button">{action}</button>}
    </div>
  );
}

export function TeamModal({ open, title, subtitle, icon, close, children, footer }: {
  open: boolean;
  title: string;
  subtitle: string;
  icon: ReactNode;
  close: () => void;
  children: ReactNode;
  footer?: ReactNode;
}) {
  if (!open) return null;
  return (
    <div className="modal-bg show" onClick={close}>
      <div className="modal invite-modal" onClick={(event) => event.stopPropagation()}>
        <span className="corner-tr">+</span><span className="corner-bl">+</span>
        <div className="modal-h"><div className="ic-m">{icon}</div><div className="ti">{title}<span>{subtitle}</span></div><button className="x modal-x" type="button" onClick={close} aria-label="关闭"><X size={14} /></button></div>
        <div className="modal-b">{children}</div>
        <div className="modal-f"><button className="btn" type="button" onClick={close}>取消</button>{footer || <button className="btn btn-primary" type="button" onClick={close}>保存</button>}</div>
      </div>
    </div>
  );
}

export function ConfirmModal({ open, title, detail, confirmText, onCancel, onConfirm }: {
  open: boolean;
  title: string;
  detail: string;
  confirmText: string;
  onCancel: () => void;
  onConfirm: () => void | Promise<unknown>;
}) {
  if (!open) return null;
  return (
    <div className="modal-bg show" onClick={onCancel}>
      <div className="modal" onClick={(event) => event.stopPropagation()}>
        <span className="corner-tr">+</span><span className="corner-bl">+</span>
        <div className="modal-h"><div className="ic-m"><Shield size={16} /></div><div className="ti">{title}<span>// CONFIRM</span></div></div>
        <div className="modal-b">{detail}</div>
        <div className="modal-f"><button className="btn" type="button" onClick={onCancel}>取消</button><button className="btn btn-primary" type="button" onClick={() => void onConfirm()}>{confirmText}</button></div>
      </div>
    </div>
  );
}

export function Drawer({ title, open, close, children }: { title: string; open: boolean; close: () => void; children: ReactNode }) {
  if (!open) return null;
  return (
    <>
      <div className="drawer-bg show" onClick={close} />
      <aside className="drawer show">
        <div className="drawer-h"><h3>{title}</h3><button className="x" type="button" onClick={close} aria-label="关闭"><X size={14} /></button></div>
        <div className="drawer-b">{children}</div>
      </aside>
    </>
  );
}

export function EmptyPanel({ title, action, onAction }: { title: string; action: string; onAction: () => void }) {
  return <div className="empty-state show"><h3>{title}</h3><p>// 先创建资料后进入下一步</p><button className="btn btn-primary" type="button" onClick={onAction}>{action}</button></div>;
}
