import { createFileRoute } from "@tanstack/react-router";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";

export const Route = createFileRoute("/settings/notifications")({
  component: NotificationsPage,
});

const channels = [
  { id: "email", label: "Email", desc: "Send updates to your inbox." },
  { id: "sms", label: "SMS", desc: "Critical alerts only." },
  { id: "push", label: "Push", desc: "Real-time in-app notifications." },
];

const events = [
  { id: "approval", label: "Campaign approvals", desc: "When compliance reviews finish." },
  { id: "wallet", label: "Wallet activity", desc: "Top-ups, holds, and refunds." },
  { id: "delivery", label: "Delivery milestones", desc: "10K, 100K, 1M messages delivered." },
  { id: "ai", label: "AI suggestions", desc: "When new AI optimizations are ready." },
  { id: "weekly", label: "Weekly digest", desc: "Performance summary every Monday." },
];

function NotificationsPage() {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Channels</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {channels.map((c) => (
            <div key={c.id} className="flex items-center justify-between gap-4 py-1">
              <div>
                <Label htmlFor={`c-${c.id}`} className="text-sm font-medium">
                  {c.label}
                </Label>
                <p className="text-xs text-muted-foreground">{c.desc}</p>
              </div>
              <Switch id={`c-${c.id}`} defaultChecked={c.id !== "sms"} />
            </div>
          ))}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Events</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {events.map((e) => (
            <div key={e.id} className="flex items-center justify-between gap-4 py-1">
              <div>
                <Label htmlFor={`e-${e.id}`} className="text-sm font-medium">
                  {e.label}
                </Label>
                <p className="text-xs text-muted-foreground">{e.desc}</p>
              </div>
              <Switch id={`e-${e.id}`} defaultChecked />
            </div>
          ))}
        </CardContent>
      </Card>

      <div className="flex justify-end gap-2">
        <Button variant="outline">Cancel</Button>
        <Button>Save notification settings</Button>
      </div>
    </div>
  );
}