"use client";

import { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  emailConfigsApi,
  type EmailConfigRead,
  type EmailConfigCreate,
  type EmailConfigUpdate,
  type EmailFolder,
} from "@/lib/api/client";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Loader2, Mail, Plus, Pencil, Trash2, FolderOpen } from "lucide-react";
import { toast } from "sonner";

export default function SettingsEmailPage() {
  const [configs, setConfigs] = useState<EmailConfigRead[]>([]);
  const [loading, setLoading] = useState(true);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [form, setForm] = useState({
    host: "",
    port: "993",
    user: "",
    password: "",
    mailbox: "INBOX",
    active: true,
  });
  const [folders, setFolders] = useState<EmailFolder[] | null>(null);
  const [foldersLoading, setFoldersLoading] = useState(false);

  const loadConfigs = useCallback(async () => {
    try {
      const list = await emailConfigsApi.list();
      setConfigs(list);
    } catch {
      toast.error("加载邮箱列表失败");
    } finally {
      setLoading(false);
    }
  }, []);

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

  const openAdd = () => {
    setEditingId(null);
    setForm({
      host: "",
      port: "993",
      user: "",
      password: "",
      mailbox: "INBOX",
      active: true,
    });
    setDialogOpen(true);
  };

  const openEdit = (c: EmailConfigRead) => {
    setEditingId(c.id);
    setFolders(null);
    setForm({
      host: c.host,
      port: String(c.port),
      user: c.user,
      password: "",
      mailbox: c.mailbox || "INBOX",
      active: c.active,
    });
    setDialogOpen(true);
  };

  const loadFolders = async () => {
    if (!editingId) return;
    setFoldersLoading(true);
    try {
      const res = await emailConfigsApi.listFolders(editingId);
      setFolders(res.folders);
      if (res.folders.length > 0 && !form.mailbox) {
        const inbox = res.folders.find((f) => f.decoded === "INBOX" || f.decoded === "收件箱");
        if (inbox) setForm((f) => ({ ...f, mailbox: inbox.decoded }));
      }
      toast.success(`已加载 ${res.folders.length} 个邮箱夹`);
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "获取邮箱列表失败");
    } finally {
      setFoldersLoading(false);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    try {
      if (editingId) {
        const payload: EmailConfigUpdate = {
          host: form.host,
          port: parseInt(form.port, 10) || 993,
          user: form.user,
          mailbox: form.mailbox,
          active: form.active,
        };
        if (form.password) payload.password = form.password;
        await emailConfigsApi.update(editingId, payload);
        toast.success("已更新");
      } else {
        await emailConfigsApi.create({
          host: form.host,
          port: parseInt(form.port, 10) || 993,
          user: form.user,
          password: form.password,
          mailbox: form.mailbox,
          active: form.active,
        });
        toast.success("已添加");
      }
      setDialogOpen(false);
      await loadConfigs();
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "保存失败");
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm("确定删除该邮箱账户？")) return;
    try {
      await emailConfigsApi.delete(id);
      toast.success("已删除");
      await loadConfigs();
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "删除失败");
    }
  };

  return (
    <div className="p-6 max-w-4xl">
      <div className="mb-4">
        <a href="/settings" className="text-sm text-muted-foreground hover:text-foreground">
          ← 设置
        </a>
      </div>
      <Card>
        <CardHeader>
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <CardTitle className="flex items-center gap-2">
                <Mail className="h-5 w-5" />
                邮箱账户
              </CardTitle>
              <p className="text-sm text-muted-foreground mt-1">
                配置多个邮箱用于财务邮件同步（发票、回执、流水）。同步时将遍历所有已启用的账户。
              </p>
            </div>
            <Button onClick={openAdd}>
              <Plus className="h-4 w-4" />
              <span className="ml-2">添加账户</span>
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          {loading ? (
            <p className="text-sm text-muted-foreground flex items-center gap-1">
              <Loader2 className="h-4 w-4 animate-spin" />
              加载中…
            </p>
          ) : configs.length === 0 ? (
            <p className="text-sm text-muted-foreground py-4">
              暂无邮箱账户。添加后将在「财务归档」同步时使用；未添加时使用环境变量 IMAP_*。
            </p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Host</TableHead>
                  <TableHead>端口</TableHead>
                  <TableHead>邮箱</TableHead>
                  <TableHead>Mailbox</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead className="w-[120px]">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {configs.map((c) => (
                  <TableRow key={c.id}>
                    <TableCell className="font-medium">{c.host}</TableCell>
                    <TableCell>{c.port}</TableCell>
                    <TableCell>{c.user}</TableCell>
                    <TableCell className="text-muted-foreground">{c.mailbox}</TableCell>
                    <TableCell>
                      {c.active ? (
                        <span className="text-xs bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 px-2 py-0.5 rounded">
                          启用
                        </span>
                      ) : (
                        <span className="text-xs text-muted-foreground">禁用</span>
                      )}
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1">
                        <Button variant="ghost" size="sm" onClick={() => openEdit(c)}>
                          <Pencil className="h-3.5 w-3.5" />
                        </Button>
                        <Button variant="ghost" size="sm" onClick={() => handleDelete(c.id)}>
                          <Trash2 className="h-3.5 w-3.5 text-destructive" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

      <Card className="mt-4">
        <CardHeader className="py-3">
          <CardTitle className="text-sm">网易 163 邮箱配置说明</CardTitle>
        </CardHeader>
        <CardContent className="text-sm text-muted-foreground space-y-2 py-2">
          <p><strong>IMAP 服务器：</strong> imap.163.com，端口 993（SSL）。需在网易邮箱网页端开启「IMAP/SMTP 服务」。</p>
          <p><strong>密码：</strong> 使用「授权码」而非登录密码。在 设置 → POP3/SMTP/IMAP → 授权码管理 中生成。</p>
          <p><strong>邮箱夹：</strong> 填 INBOX 或 收件箱；若同步失败，请编辑该账户并点击「获取邮箱列表」选择「收件箱」或目标标签。</p>
        </CardContent>
      </Card>

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>{editingId ? "编辑邮箱账户" : "添加邮箱账户"}</DialogTitle>
          </DialogHeader>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="grid gap-2">
              <Label>IMAP Host</Label>
              <Input
                value={form.host}
                onChange={(e) => setForm((f) => ({ ...f, host: e.target.value }))}
                placeholder="imap.163.com"
                required
              />
            </div>
            <div className="grid gap-2">
              <Label>端口</Label>
              <Input
                type="number"
                value={form.port}
                onChange={(e) => setForm((f) => ({ ...f, port: e.target.value }))}
                placeholder="993"
              />
            </div>
            <div className="grid gap-2">
              <Label>邮箱 / 用户名</Label>
              <Input
                type="email"
                value={form.user}
                onChange={(e) => setForm((f) => ({ ...f, user: e.target.value }))}
                placeholder="user@example.com"
                required
              />
            </div>
            <div className="grid gap-2">
              <Label>密码 / 授权码 {editingId && "(留空则不修改)"}</Label>
              <Input
                type="password"
                value={form.password}
                onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))}
                placeholder={editingId ? "••••••••" : "请输入"}
                autoComplete="off"
                required={!editingId}
              />
            </div>
            <div className="grid gap-2">
              <Label>邮箱夹 / 自定义标签 (Mailbox)</Label>
              {editingId && (
                <div className="flex gap-2">
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={loadFolders}
                    disabled={foldersLoading}
                  >
                    {foldersLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <FolderOpen className="h-4 w-4" />}
                    <span className="ml-1">获取邮箱列表</span>
                  </Button>
                </div>
              )}
              {folders && folders.length > 0 ? (
                <Select
                  value={form.mailbox}
                  onValueChange={(v) => setForm((f) => ({ ...f, mailbox: v }))}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="选择邮箱夹" />
                  </SelectTrigger>
                  <SelectContent>
                    {folders.map((f) => (
                      <SelectItem key={f.raw} value={f.decoded}>
                        {f.decoded}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              ) : (
                <Input
                  value={form.mailbox}
                  onChange={(e) => setForm((f) => ({ ...f, mailbox: e.target.value }))}
                  placeholder="INBOX、收件箱或自定义标签（163 等若 INBOX 失败会自动尝试收件箱）"
                />
              )}
            </div>
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="active"
                checked={form.active}
                onChange={(e) => setForm((f) => ({ ...f, active: e.target.checked }))}
                className="rounded border-input"
              />
              <Label htmlFor="active">启用（参与同步）</Label>
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>
                取消
              </Button>
              <Button type="submit" disabled={saving}>
                {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
                <span className="ml-2">{editingId ? "保存" : "添加"}</span>
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}