import { useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { ShieldCheck, ShieldOff, RefreshCw, Eye, EyeOff, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { toast } from "@/hooks/use-toast";
import {
  getAutoLoginStatus,
  setupAutoLogin,
  removeAutoLogin,
  triggerAutoLogin,
} from "@/api/autoLogin";

export default function AutoLoginSetup() {
  const queryClient = useQueryClient();
  const [showForm, setShowForm] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [showTotp, setShowTotp] = useState(false);
  const [form, setForm] = useState({ zerodha_login_id: "", password: "", totp_secret: "" });

  const { data: status, isLoading } = useQuery({
    queryKey: ["/auto-login/status"],
    queryFn: getAutoLoginStatus,
    refetchInterval: 60_000,
  });

  const setupMutation = useMutation({
    mutationFn: setupAutoLogin,
    onSuccess: () => {
      toast({ title: "Auto-login enabled", description: "Your Zerodha session will refresh automatically every morning." });
      setShowForm(false);
      setForm({ zerodha_login_id: "", password: "", totp_secret: "" });
      queryClient.invalidateQueries({ queryKey: ["/auto-login/status"] });
    },
    onError: (err: any) => {
      toast({ title: "Setup failed", description: err?.message ?? "Could not verify credentials. Check and try again.", variant: "destructive" });
    },
  });

  const removeMutation = useMutation({
    mutationFn: removeAutoLogin,
    onSuccess: () => {
      toast({ title: "Auto-login removed", description: "You will need to reconnect Zerodha manually each day." });
      queryClient.invalidateQueries({ queryKey: ["/auto-login/status"] });
    },
  });

  const triggerMutation = useMutation({
    mutationFn: triggerAutoLogin,
    onSuccess: () => {
      toast({ title: "Session refreshed", description: "Zerodha token has been refreshed successfully." });
      queryClient.invalidateQueries({ queryKey: ["/auto-login/status"] });
    },
    onError: (err: any) => {
      toast({ title: "Refresh failed", description: err?.message ?? "Could not refresh session.", variant: "destructive" });
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!form.zerodha_login_id || !form.password || !form.totp_secret) {
      toast({ title: "All fields are required", variant: "destructive" });
      return;
    }
    setupMutation.mutate(form);
  };

  if (isLoading) return null;

  const configured = status?.configured ?? false;
  const lastRefreshed = status?.last_refreshed_at
    ? new Date(status.last_refreshed_at).toLocaleString("en-IN", { timeZone: "Asia/Kolkata", dateStyle: "medium", timeStyle: "short" })
    : null;
  const hasError = !!status?.last_error;

  return (
    <div className="rounded-xl border border-border bg-card p-5 space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <ShieldCheck className="h-4 w-4 text-primary" />
          <span className="text-sm font-medium">Auto-Login</span>
        </div>
        {configured ? (
          <Badge variant="outline" className="text-xs border-green-500 text-green-500">
            Active
          </Badge>
        ) : (
          <Badge variant="outline" className="text-xs text-muted-foreground">
            Not configured
          </Badge>
        )}
      </div>

      {/* Status info */}
      {configured && (
        <div className="space-y-1 text-xs text-muted-foreground">
          {lastRefreshed && <p>Last refreshed: {lastRefreshed} IST</p>}
          {hasError && (
            <p className="text-red-400">Last error: {status!.last_error}</p>
          )}
          <p className="text-muted-foreground/70">Token refreshes automatically at 6:05 AM IST daily.</p>
        </div>
      )}

      {!configured && !showForm && (
        <p className="text-xs text-muted-foreground">
          Enable auto-login so QuantFortune can refresh your Zerodha session every morning — your strategy runs uninterrupted.
        </p>
      )}

      {/* Action buttons when configured */}
      {configured && (
        <div className="flex gap-2">
          <Button
            size="sm"
            variant="outline"
            className="text-xs flex-1"
            onClick={() => triggerMutation.mutate()}
            disabled={triggerMutation.isPending}
          >
            <RefreshCw className={`h-3 w-3 mr-1 ${triggerMutation.isPending ? "animate-spin" : ""}`} />
            Refresh Now
          </Button>
          <Button
            size="sm"
            variant="outline"
            className="text-xs text-red-400 border-red-400/30 hover:bg-red-400/10"
            onClick={() => removeMutation.mutate()}
            disabled={removeMutation.isPending}
          >
            <Trash2 className="h-3 w-3 mr-1" />
            Remove
          </Button>
        </div>
      )}

      {/* Setup button */}
      {!configured && !showForm && (
        <Button size="sm" className="w-full text-xs" onClick={() => setShowForm(true)}>
          <ShieldCheck className="h-3 w-3 mr-1" />
          Enable Auto-Login
        </Button>
      )}

      {/* Setup form */}
      {!configured && showForm && (
        <form onSubmit={handleSubmit} className="space-y-3">
          <div className="space-y-1">
            <Label className="text-xs">Zerodha Login ID</Label>
            <Input
              className="text-xs h-8"
              placeholder="e.g. AB1234"
              value={form.zerodha_login_id}
              onChange={(e) => setForm((f) => ({ ...f, zerodha_login_id: e.target.value }))}
            />
          </div>

          <div className="space-y-1">
            <Label className="text-xs">Zerodha Password</Label>
            <div className="relative">
              <Input
                className="text-xs h-8 pr-8"
                type={showPassword ? "text" : "password"}
                placeholder="Your Zerodha login password"
                value={form.password}
                onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))}
              />
              <button
                type="button"
                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground"
                onClick={() => setShowPassword((v) => !v)}
              >
                {showPassword ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
              </button>
            </div>
          </div>

          <div className="space-y-1">
            <Label className="text-xs">TOTP Secret Key</Label>
            <div className="relative">
              <Input
                className="text-xs h-8 pr-8"
                type={showTotp ? "text" : "password"}
                placeholder="From Zerodha 2FA setup (not the 6-digit OTP)"
                value={form.totp_secret}
                onChange={(e) => setForm((f) => ({ ...f, totp_secret: e.target.value }))}
              />
              <button
                type="button"
                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground"
                onClick={() => setShowTotp((v) => !v)}
              >
                {showTotp ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
              </button>
            </div>
            <p className="text-xs text-muted-foreground/70">
              Find this in Zerodha → My Profile → Account Security → 2FA → View TOTP secret key.
            </p>
          </div>

          <div className="flex gap-2">
            <Button
              type="submit"
              size="sm"
              className="flex-1 text-xs"
              disabled={setupMutation.isPending}
            >
              {setupMutation.isPending ? "Verifying..." : "Save & Verify"}
            </Button>
            <Button
              type="button"
              size="sm"
              variant="outline"
              className="text-xs"
              onClick={() => { setShowForm(false); setForm({ zerodha_login_id: "", password: "", totp_secret: "" }); }}
            >
              Cancel
            </Button>
          </div>
        </form>
      )}
    </div>
  );
}
