"use client";
import { useState } from "react";
import { Send, RefreshCw, CheckCircle2, XCircle, Eye, EyeOff, ArrowRight } from "lucide-react";
import { ToolLayout } from "@/components/ToolLayout";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";

interface MailServer {
  host: string;
  port: string;
  user: string;
  pass: string;
  ssl: boolean;
}

export default function ShuttleMailPage() {
  const [src, setSrc] = useState<MailServer>({ host: "", port: "993", user: "", pass: "", ssl: true });
  const [dst, setDst] = useState<MailServer>({ host: "", port: "993", user: "", pass: "", ssl: true });
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{ success?: boolean; error?: string; output?: string; summary?: string } | null>(null);
  const [showSrcPass, setShowSrcPass] = useState(false);
  const [showDstPass, setShowDstPass] = useState(false);
  const [srcTest, setSrcTest] = useState<{ ok: boolean; msg: string } | null>(null);
  const [dstTest, setDstTest] = useState<{ ok: boolean; msg: string } | null>(null);

  const testConn = async (server: MailServer, setSt: (v: { ok: boolean; msg: string }) => void) => {
    if (!server.host) { toast.error("Enter a host first"); return; }
    try {
      const res = await fetch(`/api/shuttle-mail?host=${encodeURIComponent(server.host)}&port=${server.port}&ssl=${server.ssl}`);
      const json = await res.json();
      setSt({ ok: json.success, msg: json.message ?? json.error });
    } catch {
      setSt({ ok: false, msg: "Connection failed" });
    }
  };

  const handleMigrate = async () => {
    if (!src.host || !src.user || !src.pass || !dst.host || !dst.user || !dst.pass) {
      toast.error("Fill in all credentials"); return;
    }
    setLoading(true);
    setResult(null);
    try {
      const res = await fetch("/api/shuttle-mail", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          srcHost: src.host, srcPort: src.port, srcUser: src.user, srcPass: src.pass, srcSsl: src.ssl,
          dstHost: dst.host, dstPort: dst.port, dstUser: dst.user, dstPass: dst.pass, dstSsl: dst.ssl,
        }),
      });
      const json = await res.json();
      setResult(json);
    } catch {
      toast.error("Request failed");
    } finally {
      setLoading(false);
    }
  };

  const ServerForm = ({
    title,
    val,
    set,
    showPass,
    setShowPass,
    testResult,
    onTest,
  }: {
    title: string;
    val: MailServer;
    set: React.Dispatch<React.SetStateAction<MailServer>>;
    showPass: boolean;
    setShowPass: (v: boolean) => void;
    testResult: { ok: boolean; msg: string } | null;
    onTest: () => void;
  }) => (
    <div className="glass-card rounded-xl p-5 space-y-4">
      <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">{title}</p>

      <div className="grid grid-cols-3 gap-2">
        <div className="col-span-2 space-y-1">
          <Label>Host</Label>
          <Input value={val.host} onChange={(e) => set((f) => ({ ...f, host: e.target.value }))} placeholder="mail.example.com" />
        </div>
        <div className="space-y-1">
          <Label>Port</Label>
          <Input value={val.port} onChange={(e) => set((f) => ({ ...f, port: e.target.value }))} />
        </div>
      </div>

      <div className="space-y-1">
        <Label>Username</Label>
        <Input value={val.user} onChange={(e) => set((f) => ({ ...f, user: e.target.value }))} placeholder="user@example.com" />
      </div>

      <div className="space-y-1">
        <Label>Password</Label>
        <div className="relative">
          <Input
            type={showPass ? "text" : "password"}
            value={val.pass}
            onChange={(e) => set((f) => ({ ...f, pass: e.target.value }))}
            placeholder="••••••••"
            className="pr-9"
          />
          <button type="button" onClick={() => setShowPass(!showPass)} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
            {showPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
          </button>
        </div>
      </div>

      <div className="flex items-center justify-between">
        <label className="flex items-center gap-2 cursor-pointer">
          <input type="checkbox" checked={val.ssl} onChange={(e) => set((f) => ({ ...f, ssl: e.target.checked })) } className="rounded" />
          <span className="text-sm text-muted-foreground">SSL/TLS</span>
        </label>
        <Button variant="ghost" size="sm" onClick={onTest}>Test</Button>
      </div>

      {testResult && (
        <div className={`flex items-center gap-2 text-sm px-3 py-2 rounded-lg ${testResult.ok ? "badge-ok" : "badge-err"}`}>
          {testResult.ok ? <CheckCircle2 className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
          {testResult.msg}
        </div>
      )}
    </div>
  );

  return (
    <ToolLayout icon={Send} title="Shuttle Mail" description="Migrate emails between two IMAP servers.">
      <div className="space-y-4">
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] gap-4 items-start">
          <ServerForm title="Source" val={src} set={setSrc} showPass={showSrcPass} setShowPass={setShowSrcPass} testResult={srcTest} onTest={() => testConn(src, setSrcTest)} />
          <div className="flex items-center justify-center py-4">
            <ArrowRight className="h-6 w-6 text-muted-foreground" />
          </div>
          <ServerForm title="Destination" val={dst} set={setDst} showPass={showDstPass} setShowPass={setShowDstPass} testResult={dstTest} onTest={() => testConn(dst, setDstTest)} />
        </div>

        <Button onClick={handleMigrate} disabled={loading} className="w-full">
          {loading ? <><RefreshCw className="h-4 w-4 animate-spin" /> Migrating...</> : "Start Migration"}
        </Button>

        {result && (
          <div className="glass-card rounded-xl p-4 animate-fade-up space-y-3">
            <div className="flex items-center gap-2">
              {result.success ? <CheckCircle2 className="h-5 w-5 text-green-400" /> : <XCircle className="h-5 w-5 text-red-400" />}
              <span className="font-medium">{result.success ? "Migration started" : "Migration failed"}</span>
            </div>
            {result.error && <p className="text-sm text-red-400">{result.error}</p>}
            {result.summary && <pre className="result-box p-3 text-xs overflow-x-auto">{result.summary}</pre>}
            {result.output && (
              <details>
                <summary className="text-xs text-muted-foreground cursor-pointer">Full output</summary>
                <pre className="result-box p-3 text-[11px] overflow-x-auto max-h-64 mt-2">{result.output}</pre>
              </details>
            )}
          </div>
        )}
      </div>
    </ToolLayout>
  );
}