import { createFileRoute } from "@tanstack/react-router";
import { PageHeader, SectionHeader } from "@/components/common/PageHeader";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { WGC_PER_GEL } from "@/lib/currency";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/settings")({
  head: () => ({ meta: [{ title: "Settings — Admin" }, { name: "description", content: "Platform-wide configuration and integrations." }] }),
  component: AdminSettingsPage,
});

function AdminSettingsPage() {
  return (
    <div>
      <PageHeader title="Settings" description="Platform-wide configuration." actions={<Button className="gradient-primary text-primary-foreground" onClick={() => toast.success("Settings saved")}>Save changes</Button>} />

      <Tabs defaultValue="general">
        <TabsList className="flex-wrap">
          <TabsTrigger value="general">General</TabsTrigger>
          <TabsTrigger value="currency">Currency</TabsTrigger>
          <TabsTrigger value="email">Email</TabsTrigger>
          <TabsTrigger value="integrations">Integrations</TabsTrigger>
          <TabsTrigger value="maintenance">Maintenance</TabsTrigger>
        </TabsList>

        <TabsContent value="general" className="mt-4">
          <div className="rounded-xl border border-border bg-card p-6">
            <SectionHeader title="Site" />
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-1.5"><Label>Site name</Label><Input defaultValue="Purple Zone" /></div>
              <div className="space-y-1.5"><Label>Primary URL</Label><Input defaultValue="https://purplezone.gg" /></div>
              <div className="space-y-1.5"><Label>Support email</Label><Input defaultValue="support@purplezone.gg" /></div>
              <div className="space-y-1.5"><Label>Default locale</Label>
                <Select defaultValue="en"><SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent><SelectItem value="en">English</SelectItem><SelectItem value="ka">ქართული</SelectItem><SelectItem value="ru">Русский</SelectItem></SelectContent>
                </Select>
              </div>
              <div className="sm:col-span-2 space-y-1.5"><Label>Site description</Label><Textarea rows={3} defaultValue="Purple Zone — CS2 competitive community in Georgia." /></div>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="currency" className="mt-4">
          <div className="rounded-xl border border-border bg-card p-6">
            <SectionHeader title="Currency" description="GEL is the base fiat currency. WGC is the in-platform coin." />
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-1.5"><Label>Base currency</Label><Input defaultValue="GEL (₾)" disabled /></div>
              <div className="space-y-1.5"><Label>WGC per 1 GEL</Label><Input defaultValue={WGC_PER_GEL} type="number" /></div>
              <div className="space-y-1.5"><Label>Minimum top-up</Label><Input defaultValue="1.00" /></div>
              <div className="space-y-1.5"><Label>Maximum top-up</Label><Input defaultValue="500.00" /></div>
            </div>
            <div className="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
              <Badge variant="outline" className="border-secondary/40 text-secondary">1 ₾ = {WGC_PER_GEL} WGC</Badge>
              <span>Effective across store, checkout and marketplace.</span>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="email" className="mt-4">
          <div className="rounded-xl border border-border bg-card p-6">
            <SectionHeader title="Transactional email" />
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-1.5"><Label>SMTP host</Label><Input defaultValue="smtp.mailgun.org" /></div>
              <div className="space-y-1.5"><Label>SMTP port</Label><Input defaultValue="587" /></div>
              <div className="space-y-1.5"><Label>From name</Label><Input defaultValue="Purple Zone" /></div>
              <div className="space-y-1.5"><Label>From address</Label><Input defaultValue="noreply@purplezone.gg" /></div>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="integrations" className="mt-4 grid gap-3 md:grid-cols-2">
          {[
            ["Steam OpenID", "Player sign-in", true],
            ["Stripe", "Card payments", true],
            ["PayPal", "Card + wallet", true],
            ["Crypto gateway", "USDT / TON / BTC", false],
            ["Discord webhook", "Punishment alerts", true],
            ["Anti-cheat v3", "Detection service", true],
          ].map(([n, h, on]) => (
            <div key={n as string} className="flex items-center justify-between rounded-xl border border-border bg-card p-4">
              <div><div className="font-medium">{n}</div><div className="text-xs text-muted-foreground">{h}</div></div>
              <Switch defaultChecked={on as boolean} />
            </div>
          ))}
        </TabsContent>

        <TabsContent value="maintenance" className="mt-4">
          <div className="rounded-xl border border-warning/40 bg-warning/5 p-6">
            <SectionHeader title="Maintenance mode" description="Show a maintenance page to all visitors. Admins can still sign in." />
            <div className="flex items-center justify-between">
              <span className="text-sm">Enable maintenance mode</span>
              <Switch />
            </div>
            <div className="mt-4 space-y-1.5">
              <Label>Message shown to visitors</Label>
              <Textarea rows={3} defaultValue="Purple Zone is undergoing scheduled maintenance. We'll be back shortly." />
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}