import { useState, type FormEvent, type ReactNode } from 'react';
import { Download, HardDriveDownload, RotateCcw, Trash2, Upload } from 'lucide-react';
import { api, instancePath, type Instance, type Backup, type Snapshot } from './api';
import { ResourceState, Empty, bytes, date, useAction, useResource } from './ui';
import { useConfirm } from './components/ConfirmDialog';
import { AlertBox } from './components/ui/alert';
import { DialogContent, DialogFooter, DialogRoot } from './components/ui/dialog';
import { buttonVariants } from './components/ui/button';
import { inputClass } from './components/ui/input';
import { cn } from './lib/utils';

export function BackupPanel({instance, refresh, onRestored}: {instance: Instance; refresh: () => Promise<void>; onRestored: () => Promise<void>}) {
  const base = instancePath(instance.id);
  const backups = useResource(() => api.request<Backup[]>(base + '/backups'), base);
  const snapshots = useResource(() => api.request<Snapshot[]>(base + '/snapshots'), base);
  const action = useAction();
  const confirm = useConfirm();
  const [password, setPassword] = useState('');
  const [importPassword, setImportPassword] = useState(''), [file, setFile] = useState<File>();
  const [restoreTarget, setRestoreTarget] = useState<Backup>();
  async function refreshStorage() {
    await Promise.all([backups.refresh(), snapshots.refresh(), refresh()]);
  }
  async function remove(item: Backup | Snapshot, snapshot: boolean) {
    if (snapshot && (item as Snapshot).protected) return;
    if (!await confirm.ask({
      title: snapshot ? '删除完整 home 快照' : '删除配置备份', danger: true, confirmLabel: '永久删除',
      body: `确认永久删除 ${item.id}？此操作不可撤销，不影响当前 home。${snapshot ? '删除后将无法使用此快照回滚。' : '请先下载需要保留的配置包；删除配置包不会清理完整快照。'}`,
    })) return;
    await action.run(async () => {
      try { await api.request(base + (snapshot ? '/snapshots?id=' : '/backups?id=') + encodeURIComponent(item.id), 'DELETE'); }
      finally { await refreshStorage(); }
    }, snapshot ? '快照已删除，空间占用已刷新' : '配置备份已删除');
  }

  function createBackup(e: FormEvent) {
    e.preventDefault();
    void action.run(async () => {
      try { await api.request(base + '/backups', 'POST', {password}); await backups.refresh(); }
      finally { setPassword(''); }
    }, '加密备份已创建');
  }
  function importBackup(e: FormEvent) {
    e.preventDefault();
    if (!file) return;
    void action.run(async () => {
      try {
        if (file.size > 44743364) throw new Error('备份包超过大小限制');
        const form = new FormData();
        form.set('file', file);
        form.set('password', importPassword);
        await api.request(base + '/backups', 'POST', form);
        await backups.refresh();
      } finally { setImportPassword(''); }
    }, '备份已验证并导入；尚未覆盖当前配置');
  }
  async function restore(backup: Backup, originalPassword: string) {
    if (!await confirm.ask({
      title: '恢复配置备份', danger: true, confirmLabel: '确认恢复',
      body: '确认覆盖当前配置？服务器将先保留当前 home 快照，随后按需停止实例并恢复原运行状态。',
    })) return false;
    return action.run(async () => {
      try { await api.request(base + '/restore', 'POST', {backup_id: backup.id, password: originalPassword}); await onRestored(); }
      finally { await snapshots.refresh(); }
    }, '配置恢复及插件验证完成，已恢复原运行状态。');
  }

  return <section aria-label="备份与恢复" className="grid gap-5">
    {confirm.element}
    <AlertBox variant="info">操作会按需停止实例并恢复原运行状态。备份使用创建时的登录密码加密；修改登录密码不改变旧包密码。恢复包含插件重建、重启验证和失败回滚。</AlertBox>

    <div className="grid gap-5 lg:grid-cols-2">
      <form onSubmit={createBackup} className="grid content-start gap-3 rounded-lg border border-border bg-muted/40 p-4">
        <h3 className="m-0 flex items-center gap-1.5 text-[14px] font-semibold"><HardDriveDownload className="size-4 text-primary" aria-hidden />创建加密备份</h3>
        <label className="grid gap-1.5 text-[13px] font-medium">当前登录密码
          <input className={inputClass} type="password" autoComplete="current-password" required value={password} onChange={e => setPassword(e.target.value)} /></label>
        <div><button className={cn(buttonVariants({size: 'sm'}))} disabled={action.busy || !password}>创建加密备份</button></div>
      </form>

      <form onSubmit={importBackup} className="grid content-start gap-3 rounded-lg border border-border bg-muted/40 p-4">
        <h3 className="m-0 flex items-center gap-1.5 text-[14px] font-semibold"><Upload className="size-4 text-primary" aria-hidden />导入外部备份</h3>
        <label className="grid gap-1.5 text-[13px] font-medium">加密备份文件
          <input type="file" accept=".dshbak" onChange={e => setFile(e.target.files?.[0])}
            className="w-full cursor-pointer rounded-md border border-input bg-card px-3 py-2 text-sm file:mr-3 file:rounded file:border-0 file:bg-secondary file:px-2.5 file:py-1 file:text-xs file:text-secondary-foreground" /></label>
        <label className="grid gap-1.5 text-[13px] font-medium">原备份密码（旧平台密钥包留空）
          <input className={inputClass} type="password" autoComplete="off" value={importPassword} onChange={e => setImportPassword(e.target.value)} /></label>
        <div><button className={cn(buttonVariants({variant: 'secondary', size: 'sm'}))} disabled={action.busy || !file}>验证并导入</button></div>
      </form>
    </div>

    {!restoreTarget && action.feedback}
    <h3 className="m-0 text-sm font-semibold">配置备份（.dshbak）</h3>
    <p className="m-0 text-xs text-muted-foreground">仅包含指定配置与资源，不包含完整 home 或依赖；下方大小为加密配置包大小。</p>
    <ResourceState resource={backups} />
    {backups.data?.length === 0 && <Empty>暂无配置备份</Empty>}
    <div className="grid gap-2">
      {backups.data?.map(b => <div key={b.id} className="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-border bg-card px-3.5 py-3">
        <div className="min-w-0 flex-1">
          <p className="m-0 truncate font-mono text-xs">{b.id}</p>
          <p className="m-0 mt-0.5 text-xs text-muted-foreground">{date(b.created_at)} · {bytes(b.size)}</p>
        </div>
        <div className="flex flex-wrap gap-1.5">
          <a className={cn(buttonVariants({variant: 'outline', size: 'sm'}))} href={'/api' + base + '/backups?download=' + encodeURIComponent(b.id)}><Download aria-hidden />下载</a>
          <button className={cn(buttonVariants({variant: 'secondary', size: 'sm'}))} disabled={action.busy} onClick={() => setRestoreTarget(b)}><RotateCcw aria-hidden />恢复</button>
          <button className={cn(buttonVariants({variant: 'destructive', size: 'sm'}))} disabled={action.busy} onClick={() => void remove(b, false)}><Trash2 aria-hidden />删除配置包</button>
        </div>
      </div>)}
    </div>

    <section aria-label="完整 home 快照" className="grid gap-3 border-t border-border pt-5">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <h3 className="m-0 text-sm font-semibold">完整 home 快照</h3>
        <button className={cn(buttonVariants({variant: 'outline', size: 'sm'}))} disabled={action.busy || snapshots.loading || backups.loading} onClick={() => void refreshStorage()}>刷新备份与占用</button>
      </div>
      <AlertBox variant="info">升级或恢复前保留的完整 home 副本，包含依赖及工作文件，会计入空间配额；不包含在上面的配置包大小中。快照暂不支持网页下载，需要导出时请联系管理员。删除不可撤销，待恢复实例的快照受保护。</AlertBox>
      <ResourceState resource={snapshots} />
      {snapshots.data && !snapshots.error && <p className="m-0 text-sm">快照占用（文件字节数）：{snapshots.data.some(s => s.size_error) ? '统计不完整，请查看各项错误' : bytes(snapshots.data.reduce((total, s) => total + s.size, 0))}</p>}
      {snapshots.data?.length === 0 && <Empty>暂无完整 home 快照</Empty>}
      {snapshots.data?.map(s => <div key={s.id} className="flex flex-wrap items-center gap-3 rounded-lg border border-border bg-card px-3.5 py-3">
        <div className="min-w-0 flex-1">
          <p className="m-0 break-all font-mono text-xs">{s.id}</p>
          <p className="m-0 mt-1 text-xs text-muted-foreground">{date(s.created_at)} · {s.size_error ? '大小统计失败：' + s.size_error : bytes(s.size)}</p>
          {s.protected && <p className="m-0 mt-1 text-xs text-destructive">受保护：{s.protection_reason || '实例需要恢复，请联系管理员'}</p>}
        </div>
        <button className={cn(buttonVariants({variant: 'destructive', size: 'sm'}))} disabled={action.busy || s.protected} onClick={() => void remove(s, true)}><Trash2 aria-hidden />删除快照</button>
      </div>)}
    </section>

    {restoreTarget && <RestoreDialog backup={restoreTarget} busy={action.busy} feedback={action.feedback} onClose={() => setRestoreTarget(undefined)} onSubmit={async password => {
      const ok = await restore(restoreTarget, password);
      if (ok) setRestoreTarget(undefined);
    }} />}
  </section>;
}

function RestoreDialog({backup, busy, feedback, onClose, onSubmit}: {backup: Backup; busy: boolean; feedback: ReactNode; onClose: () => void; onSubmit: (password: string) => Promise<void>}) {
  const [password, setPassword] = useState('');
  return <DialogRoot open onOpenChange={open => { if (!open && !busy) onClose(); }}>
    <DialogContent title={'恢复备份 · ' + backup.id}>
      <form className="grid gap-4" onSubmit={e => { e.preventDefault(); void onSubmit(password); }}>
        {feedback}
        <AlertBox variant="info">创建于 {date(backup.created_at)} · {bytes(backup.size)}。输入创建该备份时使用的登录密码；旧平台密钥包可留空。</AlertBox>
        <label className="grid gap-1.5 text-[13px] font-medium">原备份密码
          <input className={inputClass} type="password" autoComplete="off" value={password} onChange={e => setPassword(e.target.value)} disabled={busy} autoFocus /></label>
        <DialogFooter className="border-t-0 pt-0">
          <button type="button" className={cn(buttonVariants({variant: 'outline'}))} disabled={busy} onClick={onClose}>取消</button>
          <button className={cn(buttonVariants({variant: 'destructive'}))} disabled={busy}>{busy ? '正在恢复…' : '恢复此备份'}</button>
        </DialogFooter>
      </form>
    </DialogContent>
  </DialogRoot>;
}