"use client";

import { useState, useEffect, useMemo } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Megaphone, Plus, Trash2, Tag } from "lucide-react";
import type { UserRole } from "@/lib/types";

interface Campaign {
  id: string;
  name: string;
  description: string | null;
  tags: string;
  status: string;
  startDate: string | null;
  endDate: string | null;
  externalRef: string | null;
  createdAt: string;
  _count: { posts: number };
}

const STATUS_COLORS: Record<string, string> = {
  PLANNING: "bg-gray-100 text-gray-700",
  ACTIVE: "bg-green-100 text-green-700",
  COMPLETED: "bg-blue-100 text-blue-700",
};

export default function CampaignsPage() {
  const router = useRouter();
  const { data: session } = useSession();
  const role = (session?.user as { role?: UserRole })?.role;
  const isAdmin = role === "ADMIN";
  const canEdit = role === "ADMIN" || role === "EDITOR";

  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [showCreate, setShowCreate] = useState(false);
  const [newName, setNewName] = useState("");
  const [newDesc, setNewDesc] = useState("");
  const [newTags, setNewTags] = useState("");
  const [newStatus, setNewStatus] = useState("PLANNING");
  const [creating, setCreating] = useState(false);
  const [tagFilter, setTagFilter] = useState<string>("all");

  const fetchCampaigns = async () => {
    try {
      const res = await fetch("/api/v1/campaigns");
      if (!res.ok) throw new Error("Failed to load campaigns");
      const data = await res.json();
      setCampaigns(Array.isArray(data) ? data : []);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to load");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { fetchCampaigns(); }, []);

  const handleCreate = async () => {
    if (!newName.trim()) return;
    setCreating(true);
    try {
      const tags = newTags ? newTags.split(",").map((t) => t.trim()).filter(Boolean) : [];
      const res = await fetch("/api/v1/campaigns", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: newName.trim(), description: newDesc || undefined, tags, status: newStatus }),
      });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Failed to create");
      }
      setNewName("");
      setNewDesc("");
      setNewTags("");
      setNewStatus("PLANNING");
      setShowCreate(false);
      fetchCampaigns();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create");
    } finally {
      setCreating(false);
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm("Delete this campaign?")) return;
    try {
      const res = await fetch(`/api/v1/campaigns/${id}`, { method: "DELETE" });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Failed to delete");
      }
      fetchCampaigns();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to delete");
    }
  };

  const parseTags = (tags: string): string[] => {
    try {
      const parsed = JSON.parse(tags);
      return Array.isArray(parsed) ? parsed : [];
    } catch {
      return [];
    }
  };

  const formatDate = (d: string | null) => {
    if (!d) return null;
    return new Date(d).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
  };

  const allTags = useMemo(() => {
    const tagSet = new Set<string>();
    campaigns.forEach((c) => parseTags(c.tags).forEach((t) => tagSet.add(t)));
    return Array.from(tagSet).sort();
  }, [campaigns]);

  const filteredCampaigns = useMemo(() => {
    if (tagFilter === "all") return campaigns;
    return campaigns.filter((c) => parseTags(c.tags).includes(tagFilter));
  }, [campaigns, tagFilter]);

  return (
    <div className="space-y-6">
      <div className="border-b border-gray-100 -mx-4 md:-mx-6 -mt-4 md:-mt-6 px-4 sm:px-8 py-4 sm:py-5 mb-4 sm:mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-gray-900">Campaigns</h1>
          <p className="text-sm text-gray-500">Manage your social media campaigns</p>
        </div>
        <div className="flex items-center gap-2">
          {allTags.length > 0 && (
            <Select value={tagFilter} onValueChange={(v) => setTagFilter(v ?? "all")}>
              <SelectTrigger className="w-[140px] sm:w-[160px] h-8 text-xs border-gray-200" data-testid="tag-filter">
                <Tag className="h-3 w-3 mr-1 text-gray-500" />
                <SelectValue placeholder="All Tags" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Tags</SelectItem>
                {allTags.map((t) => (
                  <SelectItem key={t} value={t}>{t}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}
          {canEdit && (
            <Button
              size="sm"
              className="bg-gray-900 hover:bg-gray-800 text-white"
              onClick={() => setShowCreate(!showCreate)}
            >
              <Plus className="h-4 w-4 mr-1.5" />
              New Campaign
            </Button>
          )}
        </div>
      </div>

      {error && (
        <div className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
          {error}
          <button onClick={() => setError("")} className="ml-2 text-red-500 hover:text-red-700">&times;</button>
        </div>
      )}

      {showCreate && (
        <Card className="bg-white border border-gray-200 rounded-xl shadow-none">
          <CardHeader>
            <CardTitle className="text-base font-semibold text-gray-900">Create Campaign</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div>
              <label className="text-xs font-medium text-gray-500">Name *</label>
              <input
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
                maxLength={200}
                placeholder="Campaign name"
                className="w-full rounded-lg border border-gray-200 px-3 py-1.5 text-sm mt-1"
              />
              <p className="text-xs text-gray-400 mt-0.5">{newName.length}/200</p>
            </div>
            <div>
              <label className="text-xs font-medium text-gray-500">Description</label>
              <textarea
                value={newDesc}
                onChange={(e) => setNewDesc(e.target.value)}
                placeholder="Optional description"
                className="w-full rounded-lg border border-gray-200 px-3 py-1.5 text-sm mt-1 min-h-[60px]"
              />
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <div>
                <label className="text-xs font-medium text-gray-500">Status</label>
                <select
                  value={newStatus}
                  onChange={(e) => setNewStatus(e.target.value)}
                  className="w-full rounded-lg border border-gray-200 px-3 py-1.5 text-sm mt-1"
                >
                  <option value="PLANNING">Planning</option>
                  <option value="ACTIVE">Active</option>
                  <option value="COMPLETED">Completed</option>
                </select>
              </div>
              <div>
                <label className="text-xs font-medium text-gray-500">Tags (comma-separated)</label>
                <input
                  value={newTags}
                  onChange={(e) => setNewTags(e.target.value)}
                  placeholder="launch, q2, dev"
                  className="w-full rounded-lg border border-gray-200 px-3 py-1.5 text-sm mt-1"
                />
              </div>
            </div>
            <div className="flex gap-2 pt-1">
              <Button size="sm" className="bg-gray-900 hover:bg-gray-800 text-white" onClick={handleCreate} disabled={creating || !newName.trim()}>
                {creating ? "Creating..." : "Create"}
              </Button>
              <Button size="sm" variant="outline" onClick={() => setShowCreate(false)}>Cancel</Button>
            </div>
          </CardContent>
        </Card>
      )}

      {loading ? (
        <div className="py-12 text-center text-sm text-gray-500">Loading campaigns...</div>
      ) : filteredCampaigns.length === 0 ? (
        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-300 py-16">
          <Megaphone className="h-12 w-12 text-gray-300 mb-4" />
          <p className="text-sm font-medium text-gray-600">No campaigns yet</p>
          <p className="text-xs text-gray-500 mt-1">Create your first campaign to organize posts.</p>
        </div>
      ) : (
        <div className="space-y-3">
          {filteredCampaigns.map((c) => {
            const tags = parseTags(c.tags);
            return (
              <Card
                key={c.id}
                className="bg-white border border-gray-200 rounded-xl shadow-none cursor-pointer hover:border-gray-300 hover:shadow-sm transition-all"
                onClick={() => router.push(`/dashboard/calendar?campaign=${c.id}`)}
              >
                <CardContent className="p-4">
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center gap-2 flex-wrap">
                        <h3 className="text-sm font-semibold text-gray-900 truncate">{c.name}</h3>
                        <Badge className={`text-[10px] ${STATUS_COLORS[c.status] ?? "bg-gray-100 text-gray-700"}`}>
                          {c.status}
                        </Badge>
                      </div>
                      {c.description && (
                        <p className="text-xs text-gray-500 mt-1 line-clamp-2">{c.description}</p>
                      )}
                      <div className="flex items-center gap-3 mt-2 text-xs text-gray-400">
                        <span>{c._count.posts} post{c._count.posts !== 1 ? "s" : ""}</span>
                        <span>Created {formatDate(c.createdAt)}</span>
                        {c.startDate && <span>Start: {formatDate(c.startDate)}</span>}
                        {c.endDate && <span>End: {formatDate(c.endDate)}</span>}
                        {c.externalRef && <span>Ref: {c.externalRef}</span>}
                      </div>
                      {tags.length > 0 && (
                        <div className="flex flex-wrap gap-1 mt-2">
                          {tags.map((tag) => (
                            <Badge key={tag} variant="outline" className="text-[10px] border-gray-200 text-gray-600">
                              {tag}
                            </Badge>
                          ))}
                        </div>
                      )}
                    </div>
                    {isAdmin && (
                      <button
                        onClick={() => handleDelete(c.id)}
                        className="text-gray-400 hover:text-red-500 transition-colors shrink-0"
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    )}
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
}