import { createFileRoute, Link } from "@tanstack/react-router";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Loader2, Save, User2, Bell, Palette, CreditCard, Store, Monitor, LogOut } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { getMe } from "@/lib/dashboard.functions";
import { updateProfile } from "@/lib/profile.functions";
import { setStoredTheme, type Theme } from "@/lib/theme";
import { listMyEbayAccounts, getEbayCapacity, disconnectEbayAccount } from "@/lib/ebay.functions";
import { listLoginHistory } from "@/lib/auth.functions";

export const Route = createFileRoute("/_authenticated/settings")({
  head: () => ({ meta: [{ title: "Settings — eBay BOS" }] }),
  component: SettingsPage,
});

function SettingsPage() {
  return (
    <div className="mx-auto max-w-4xl px-6 py-8">
      <div className="mb-6">
        <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          Manage your profile, security, subscription, and connected services.
        </p>
      </div>
      <Tabs defaultValue="profile">
        <TabsList className="flex flex-wrap">
          <TabsTrigger value="profile"><User2 className="mr-1.5 h-3.5 w-3.5" />Profile</TabsTrigger>
          <TabsTrigger value="security"><LogOut className="mr-1.5 h-3.5 w-3.5" />Security</TabsTrigger>
          <TabsTrigger value="notifications"><Bell className="mr-1.5 h-3.5 w-3.5" />Notifications</TabsTrigger>
          <TabsTrigger value="appearance"><Palette className="mr-1.5 h-3.5 w-3.5" />Appearance</TabsTrigger>
          <TabsTrigger value="subscription"><CreditCard className="mr-1.5 h-3.5 w-3.5" />Subscription</TabsTrigger>
          <TabsTrigger value="ebay"><Store className="mr-1.5 h-3.5 w-3.5" />eBay Accounts</TabsTrigger>
          <TabsTrigger value="sessions"><Monitor className="mr-1.5 h-3.5 w-3.5" />Sessions</TabsTrigger>
        </TabsList>

        <TabsContent value="profile" className="mt-6"><ProfileAppearance mode="profile" /></TabsContent>
        <TabsContent value="appearance" className="mt-6"><ProfileAppearance mode="appearance" /></TabsContent>
        <TabsContent value="security" className="mt-6"><SecurityPanel /></TabsContent>
        <TabsContent value="notifications" className="mt-6"><NotificationsRedirect /></TabsContent>
        <TabsContent value="subscription" className="mt-6"><SubscriptionRedirect /></TabsContent>
        <TabsContent value="ebay" className="mt-6"><EbayAccountsPanel /></TabsContent>
        <TabsContent value="sessions" className="mt-6"><SessionsPanel /></TabsContent>
      </Tabs>
    </div>
  );
}

function ProfileAppearance({ mode }: { mode: "profile" | "appearance" }) {
  const qc = useQueryClient();
  const fetchMe = useServerFn(getMe);
  const doUpdate = useServerFn(updateProfile);
  const me = useQuery({ queryKey: ["me"], queryFn: () => fetchMe({ data: undefined as never }) });

  const [fullName, setFullName] = useState("");
  const [avatarUrl, setAvatarUrl] = useState("");
  const [theme, setTheme] = useState<Theme>("system");

  useEffect(() => {
    if (me.data) {
      setFullName(me.data.profile.full_name ?? "");
      setAvatarUrl(me.data.profile.avatar_url ?? "");
      setTheme((me.data.profile.theme as Theme) ?? "system");
    }
  }, [me.data]);

  const save = useMutation({
    mutationFn: () => doUpdate({ data: { full_name: fullName.trim() || null, avatar_url: avatarUrl.trim() || null, theme } }),
    onSuccess: () => { setStoredTheme(theme); toast.success("Saved"); qc.invalidateQueries({ queryKey: ["me"] }); },
    onError: (e: Error) => toast.error(e.message),
  });

  if (me.isLoading) return <Loading />;

  return (
    <div className="space-y-6">
      {mode === "profile" ? (
        <section className="space-y-4 rounded-xl border bg-card p-6">
          <h2 className="text-sm font-semibold">Profile</h2>
          <div className="space-y-2"><Label>Email</Label><Input value={me.data?.email ?? ""} disabled /></div>
          <div className="space-y-2"><Label htmlFor="full-name">Full name</Label><Input id="full-name" value={fullName} onChange={(e) => setFullName(e.target.value)} /></div>
          <div className="space-y-2"><Label htmlFor="avatar">Avatar URL</Label><Input id="avatar" value={avatarUrl} onChange={(e) => setAvatarUrl(e.target.value)} placeholder="https://…" /></div>
        </section>
      ) : (
        <section className="space-y-4 rounded-xl border bg-card p-6">
          <h2 className="text-sm font-semibold">Appearance</h2>
          <div className="space-y-2">
            <Label>Theme</Label>
            <Select value={theme} onValueChange={(v) => setTheme(v as Theme)}>
              <SelectTrigger><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="system">System</SelectItem>
                <SelectItem value="light">Light</SelectItem>
                <SelectItem value="dark">Dark</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </section>
      )}
      <div className="flex justify-end">
        <Button onClick={() => save.mutate()} disabled={save.isPending}>
          {save.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
          Save changes
        </Button>
      </div>
    </div>
  );
}

function SecurityPanel() {
  const fetchMe = useServerFn(getMe);
  const me = useQuery({ queryKey: ["me"], queryFn: () => fetchMe({ data: undefined as never }) });
  return (
    <div className="space-y-4 rounded-xl border bg-card p-6">
      <h2 className="text-sm font-semibold">Password</h2>
      <p className="text-sm text-muted-foreground">
        Change your password by requesting a reset email. We'll send a secure link to {me.data?.email ?? "your inbox"}.
      </p>
      <Link to="/forgot-password" className="inline-flex h-9 items-center rounded-md border px-4 text-sm font-medium hover:bg-accent">
        Send password reset
      </Link>
    </div>
  );
}

function NotificationsRedirect() {
  return (
    <div className="rounded-xl border bg-card p-6">
      <h2 className="text-sm font-semibold">Notification preferences</h2>
      <p className="mt-1 text-sm text-muted-foreground">Manage in-app, email, and push notifications.</p>
      <Link to="/notifications" className="mt-4 inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90">
        Open notification center
      </Link>
    </div>
  );
}

function SubscriptionRedirect() {
  const fetchMe = useServerFn(getMe);
  const me = useQuery({ queryKey: ["me"], queryFn: () => fetchMe({ data: undefined as never }) });
  return (
    <div className="rounded-xl border bg-card p-6">
      <h2 className="text-sm font-semibold">Current plan</h2>
      <p className="mt-1 text-sm text-muted-foreground">
        You're on <strong>{me.data?.plan?.name ?? "Free Forever"}</strong>.
      </p>
      <Link to="/subscription" className="mt-4 inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90">
        Manage subscription
      </Link>
    </div>
  );
}

function EbayAccountsPanel() {
  const qc = useQueryClient();
  const listFn = useServerFn(listMyEbayAccounts);
  const capFn = useServerFn(getEbayCapacity);
  const disconnectFn = useServerFn(disconnectEbayAccount);
  const list = useQuery({ queryKey: ["my-ebay-accounts"], queryFn: () => listFn({ data: undefined as never }) });
  const cap = useQuery({ queryKey: ["ebay-capacity"], queryFn: () => capFn({ data: undefined as never }) });
  const del = useMutation({
    mutationFn: (id: string) => disconnectFn({ data: { id } }),
    onSuccess: () => { toast.success("Disconnected"); qc.invalidateQueries({ queryKey: ["my-ebay-accounts"] }); qc.invalidateQueries({ queryKey: ["ebay-capacity"] }); },
    onError: (e: Error) => toast.error(e.message),
  });

  return (
    <div className="space-y-4 rounded-xl border bg-card p-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-sm font-semibold">Connected eBay accounts</h2>
          <p className="mt-1 text-sm text-muted-foreground">
            {cap.data ? (cap.data.limit < 0 ? `${cap.data.connected} connected · Unlimited` : `${cap.data.connected} / ${cap.data.limit} connected`) : "Loading…"}
          </p>
        </div>
        <Link to="/dashboard" className="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90">
          Connect account
        </Link>
      </div>
      {list.isLoading ? <Loading /> : list.data?.length === 0 ? (
        <p className="py-6 text-center text-sm text-muted-foreground">No eBay accounts connected yet.</p>
      ) : (
        <Table>
          <TableHeader><TableRow><TableHead>Account</TableHead><TableHead>Status</TableHead><TableHead>Last sync</TableHead><TableHead className="w-10" /></TableRow></TableHeader>
          <TableBody>
            {list.data?.map((a) => (
              <TableRow key={a.id}>
                <TableCell className="font-medium">{a.account_name}</TableCell>
                <TableCell><Badge variant={a.status === "active" ? "default" : "secondary"}>{a.status}</Badge></TableCell>
                <TableCell className="text-muted-foreground">{a.last_sync ? new Date(a.last_sync).toLocaleString() : "—"}</TableCell>
                <TableCell><Button size="sm" variant="ghost" onClick={() => del.mutate(a.id)}>Disconnect</Button></TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </div>
  );
}

function SessionsPanel() {
  const fn = useServerFn(listLoginHistory);
  const q = useQuery({ queryKey: ["my-login-history"], queryFn: () => fn({ data: undefined as never }) });
  return (
    <div className="space-y-4 rounded-xl border bg-card p-6">
      <div>
        <h2 className="text-sm font-semibold">Recent sign-ins & devices</h2>
        <p className="mt-1 text-sm text-muted-foreground">Where and when your account has been used.</p>
      </div>
      {q.isLoading ? <Loading /> : q.data?.length === 0 ? (
        <p className="py-6 text-center text-sm text-muted-foreground">No sign-in history yet.</p>
      ) : (
        <Table>
          <TableHeader><TableRow><TableHead>When</TableHead><TableHead>Event</TableHead><TableHead>IP</TableHead><TableHead>Device</TableHead></TableRow></TableHeader>
          <TableBody>
            {q.data?.map((r) => (
              <TableRow key={r.id}>
                <TableCell className="whitespace-nowrap text-muted-foreground">{new Date(r.created_at).toLocaleString()}</TableCell>
                <TableCell>{r.event}</TableCell>
                <TableCell className="font-mono text-xs">{r.ip ?? "—"}</TableCell>
                <TableCell className="max-w-[200px] truncate text-xs text-muted-foreground">{r.user_agent ?? "—"}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </div>
  );
}

function Loading() {
  return <div className="flex min-h-[20vh] items-center justify-center"><Loader2 className="h-5 w-5 animate-spin text-muted-foreground" /></div>;
}