import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Trash2 } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/marketing")({ component: MarketingAdmin });

type Promo = { id: string; code: string; kind: "percent" | "fixed"; value: number; min_amount: number; usage_limit: number | null; per_user_limit: number; starts_at: string | null; expires_at: string | null; active: boolean; description: string | null };
type Offer = { id: string; title: string; description: string; badge: string | null; promo_code: string | null; cta_label: string | null; cta_url: string | null; starts_at: string | null; ends_at: string | null; active: boolean; sort_order: number };
type Referral = { referrer_id: string; referee_id: string; reward_amount: number; rewarded_at: string | null; created_at: string };

function MarketingAdmin() {
  return (
    <div>
      <h1 className="text-2xl font-bold">Offers &amp; Marketing</h1>
      <p className="mt-1 text-sm text-muted-foreground">Promo codes, seasonal offers and referral tracking.</p>
      <Tabs defaultValue="promos" className="mt-6">
        <TabsList>
          <TabsTrigger value="promos">Promo codes</TabsTrigger>
          <TabsTrigger value="offers">Seasonal offers</TabsTrigger>
          <TabsTrigger value="referrals">Referrals</TabsTrigger>
        </TabsList>
        <TabsContent value="promos" className="mt-4"><PromoAdmin /></TabsContent>
        <TabsContent value="offers" className="mt-4"><OffersAdmin /></TabsContent>
        <TabsContent value="referrals" className="mt-4"><ReferralsAdmin /></TabsContent>
      </Tabs>
    </div>
  );
}

function PromoAdmin() {
  const [rows, setRows] = useState<Promo[]>([]);
  const empty = { code: "", kind: "percent" as "percent" | "fixed", value: 10, min_amount: 0, usage_limit: "", per_user_limit: 1, expires_at: "", description: "" };
  const [f, setF] = useState(empty);

  const load = async () => {
    const { data, error } = await supabase.from("promo_codes").select("*").order("created_at", { ascending: false });
    if (error) toast.error(error.message); else setRows((data ?? []) as Promo[]);
  };
  useEffect(() => { load(); }, []);

  const create = async () => {
    if (!f.code.trim()) return toast.error("Code required");
    const payload = {
      code: f.code.trim().toUpperCase(),
      kind: f.kind,
      value: Number(f.value),
      min_amount: Number(f.min_amount) || 0,
      usage_limit: f.usage_limit ? Number(f.usage_limit) : null,
      per_user_limit: Number(f.per_user_limit) || 1,
      expires_at: f.expires_at ? new Date(f.expires_at).toISOString() : null,
      description: f.description.trim() || null,
    };
    const { error } = await supabase.from("promo_codes").insert(payload);
    if (error) return toast.error(error.message);
    setF(empty); toast.success("Promo code created"); load();
  };

  const toggle = async (p: Promo) => {
    const { error } = await supabase.from("promo_codes").update({ active: !p.active }).eq("id", p.id);
    if (error) return toast.error(error.message);
    setRows((rs) => rs.map((r) => (r.id === p.id ? { ...r, active: !p.active } : r)));
  };
  const remove = async (id: string) => {
    if (!confirm("Delete this promo code?")) return;
    const { error } = await supabase.from("promo_codes").delete().eq("id", id);
    if (error) return toast.error(error.message);
    setRows((rs) => rs.filter((r) => r.id !== id));
  };

  return (
    <div className="grid gap-6 lg:grid-cols-[380px_1fr]">
      <Card>
        <CardHeader><CardTitle>New promo code</CardTitle></CardHeader>
        <CardContent className="space-y-3">
          <div className="space-y-1"><Label>Code</Label><Input value={f.code} onChange={(e) => setF({ ...f, code: e.target.value })} placeholder="SUMMER25" /></div>
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1"><Label>Type</Label>
              <Select value={f.kind} onValueChange={(v) => setF({ ...f, kind: v as "percent" | "fixed" })}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent><SelectItem value="percent">% off</SelectItem><SelectItem value="fixed">KSh off</SelectItem></SelectContent>
              </Select>
            </div>
            <div className="space-y-1"><Label>Value</Label><Input type="number" value={f.value} onChange={(e) => setF({ ...f, value: Number(e.target.value) })} /></div>
          </div>
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1"><Label>Min order (KSh)</Label><Input type="number" value={f.min_amount} onChange={(e) => setF({ ...f, min_amount: Number(e.target.value) })} /></div>
            <div className="space-y-1"><Label>Per user</Label><Input type="number" value={f.per_user_limit} onChange={(e) => setF({ ...f, per_user_limit: Number(e.target.value) })} /></div>
          </div>
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1"><Label>Total uses (blank = ∞)</Label><Input type="number" value={f.usage_limit} onChange={(e) => setF({ ...f, usage_limit: e.target.value })} /></div>
            <div className="space-y-1"><Label>Expires</Label><Input type="datetime-local" value={f.expires_at} onChange={(e) => setF({ ...f, expires_at: e.target.value })} /></div>
          </div>
          <div className="space-y-1"><Label>Description</Label><Textarea rows={2} value={f.description} onChange={(e) => setF({ ...f, description: e.target.value })} /></div>
          <Button onClick={create} className="w-full">Create code</Button>
        </CardContent>
      </Card>
      <div className="space-y-2">
        {rows.length === 0 && <p className="text-sm text-muted-foreground">No promo codes yet.</p>}
        {rows.map((p) => (
          <Card key={p.id}>
            <CardContent className="flex flex-wrap items-center justify-between gap-3 p-4">
              <div>
                <div className="flex items-center gap-2">
                  <span className="font-mono text-base font-semibold">{p.code}</span>
                  <Badge variant="outline">{p.kind === "percent" ? `${p.value}%` : `KSh ${p.value}`}</Badge>
                  {p.expires_at && <span className="text-xs text-muted-foreground">exp {new Date(p.expires_at).toLocaleDateString()}</span>}
                </div>
                {p.description && <p className="mt-1 text-xs text-muted-foreground">{p.description}</p>}
                <p className="mt-1 text-xs text-muted-foreground">Min KSh {p.min_amount} · {p.per_user_limit}/user · {p.usage_limit ?? "∞"} total</p>
              </div>
              <div className="flex items-center gap-3">
                <label className="flex items-center gap-2 text-xs"><Switch checked={p.active} onCheckedChange={() => toggle(p)} /> Active</label>
                <Button size="icon" variant="ghost" onClick={() => remove(p.id)}><Trash2 className="h-4 w-4" /></Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

function OffersAdmin() {
  const [rows, setRows] = useState<Offer[]>([]);
  const empty = { title: "", description: "", badge: "", promo_code: "", cta_label: "", cta_url: "", starts_at: "", ends_at: "", sort_order: 0 };
  const [f, setF] = useState(empty);

  const load = async () => {
    const { data, error } = await supabase.from("offers").select("*").order("sort_order");
    if (error) toast.error(error.message); else setRows((data ?? []) as Offer[]);
  };
  useEffect(() => { load(); }, []);

  const create = async () => {
    if (!f.title.trim() || !f.description.trim()) return toast.error("Title and description required");
    const payload = {
      title: f.title.trim(),
      description: f.description.trim(),
      badge: f.badge.trim() || null,
      promo_code: f.promo_code.trim() || null,
      cta_label: f.cta_label.trim() || null,
      cta_url: f.cta_url.trim() || null,
      starts_at: f.starts_at ? new Date(f.starts_at).toISOString() : null,
      ends_at: f.ends_at ? new Date(f.ends_at).toISOString() : null,
      sort_order: Number(f.sort_order) || 0,
    };
    const { error } = await supabase.from("offers").insert(payload);
    if (error) return toast.error(error.message);
    setF(empty); toast.success("Offer created"); load();
  };

  const toggle = async (o: Offer) => {
    const { error } = await supabase.from("offers").update({ active: !o.active }).eq("id", o.id);
    if (error) return toast.error(error.message);
    setRows((rs) => rs.map((r) => (r.id === o.id ? { ...r, active: !o.active } : r)));
  };
  const remove = async (id: string) => {
    if (!confirm("Delete this offer?")) return;
    const { error } = await supabase.from("offers").delete().eq("id", id);
    if (error) return toast.error(error.message);
    setRows((rs) => rs.filter((r) => r.id !== id));
  };

  return (
    <div className="grid gap-6 lg:grid-cols-[380px_1fr]">
      <Card>
        <CardHeader><CardTitle>New offer</CardTitle></CardHeader>
        <CardContent className="space-y-3">
          <div className="space-y-1"><Label>Title</Label><Input value={f.title} onChange={(e) => setF({ ...f, title: e.target.value })} /></div>
          <div className="space-y-1"><Label>Description</Label><Textarea rows={3} value={f.description} onChange={(e) => setF({ ...f, description: e.target.value })} /></div>
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1"><Label>Badge</Label><Input value={f.badge} onChange={(e) => setF({ ...f, badge: e.target.value })} placeholder="Seasonal" /></div>
            <div className="space-y-1"><Label>Promo code</Label><Input value={f.promo_code} onChange={(e) => setF({ ...f, promo_code: e.target.value })} placeholder="SUMMER25" /></div>
          </div>
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1"><Label>CTA label</Label><Input value={f.cta_label} onChange={(e) => setF({ ...f, cta_label: e.target.value })} /></div>
            <div className="space-y-1"><Label>CTA URL</Label><Input value={f.cta_url} onChange={(e) => setF({ ...f, cta_url: e.target.value })} /></div>
          </div>
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1"><Label>Starts</Label><Input type="datetime-local" value={f.starts_at} onChange={(e) => setF({ ...f, starts_at: e.target.value })} /></div>
            <div className="space-y-1"><Label>Ends</Label><Input type="datetime-local" value={f.ends_at} onChange={(e) => setF({ ...f, ends_at: e.target.value })} /></div>
          </div>
          <Button onClick={create} className="w-full">Publish offer</Button>
        </CardContent>
      </Card>
      <div className="space-y-2">
        {rows.length === 0 && <p className="text-sm text-muted-foreground">No offers yet.</p>}
        {rows.map((o) => (
          <Card key={o.id}>
            <CardContent className="flex flex-wrap items-center justify-between gap-3 p-4">
              <div className="min-w-0">
                <div className="flex items-center gap-2">
                  {o.badge && <Badge variant="secondary">{o.badge}</Badge>}
                  <span className="font-semibold">{o.title}</span>
                  {o.promo_code && <Badge variant="outline" className="font-mono">{o.promo_code}</Badge>}
                </div>
                <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">{o.description}</p>
                <p className="mt-1 text-xs text-muted-foreground">
                  {o.starts_at && `From ${new Date(o.starts_at).toLocaleDateString()} `}
                  {o.ends_at && `until ${new Date(o.ends_at).toLocaleDateString()}`}
                </p>
              </div>
              <div className="flex items-center gap-3">
                <label className="flex items-center gap-2 text-xs"><Switch checked={o.active} onCheckedChange={() => toggle(o)} /> Active</label>
                <Button size="icon" variant="ghost" onClick={() => remove(o.id)}><Trash2 className="h-4 w-4" /></Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

function ReferralsAdmin() {
  const [rows, setRows] = useState<(Referral & { referrer_email?: string | null; referee_email?: string | null })[]>([]);
  useEffect(() => {
    (async () => {
      const { data } = await supabase.from("referrals").select("*").order("created_at", { ascending: false });
      const list = (data ?? []) as Referral[];
      const ids = Array.from(new Set(list.flatMap((r) => [r.referrer_id, r.referee_id])));
      const { data: profs } = ids.length
        ? await supabase.from("profiles").select("id, email, full_name, username").in("id", ids)
        : { data: [] as { id: string; email: string | null; full_name: string | null; username: string | null }[] };
      const map = new Map((profs ?? []).map((p) => [p.id, p.full_name || p.username || p.email || p.id.slice(0, 8)]));
      setRows(list.map((r) => ({ ...r, referrer_email: map.get(r.referrer_id) ?? r.referrer_id.slice(0, 8), referee_email: map.get(r.referee_id) ?? r.referee_id.slice(0, 8) })));
    })();
  }, []);
  return (
    <Card>
      <CardHeader><CardTitle>Referral log</CardTitle></CardHeader>
      <CardContent>
        {rows.length === 0 ? (
          <p className="text-sm text-muted-foreground">No referrals yet.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="text-left text-xs uppercase text-muted-foreground"><tr><th className="py-2">Referrer</th><th>Referee</th><th>Reward</th><th>Status</th><th>Date</th></tr></thead>
              <tbody>
                {rows.map((r) => (
                  <tr key={r.referee_id} className="border-t">
                    <td className="py-2">{r.referrer_email}</td>
                    <td>{r.referee_email}</td>
                    <td>KSh {Number(r.reward_amount).toFixed(0)}</td>
                    <td>{r.rewarded_at ? <Badge variant="default">Paid</Badge> : <Badge variant="secondary">Pending first payment</Badge>}</td>
                    <td className="text-xs text-muted-foreground">{new Date(r.created_at).toLocaleDateString()}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </CardContent>
    </Card>
  );
}