"use client";

import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Search, Filter } from "lucide-react";
import Image from "next/image";
import { useState } from "react";

const stats = [
  { title: "Total Content", value: 24, color: "bg-blue-500" },
  { title: "Drafts", value: 8, color: "bg-slate-600" },
  { title: "Pending", value: 10, color: "bg-yellow-500" },
  { title: "Approved", value: 10, color: "bg-green-600" },
  { title: "Revision/Rejected", value: 6, color: "bg-red-600" },
];

const contents = [
  {
    id: 1,
    title: "Bharatu Mardi Hadji Gugur Saat Bertugas...",
    image: "/image/bharatu.jpg",
    status: "Pending",
    category: "News",
    date: "2024-01-20",
  },
  {
    id: 2,
    title: "Novita Hardini: Jangan Sampai Pariwisata...",
    image: "/image/novita2.png",
    status: "Approved",
    category: "News",
    date: "2024-01-20",
  },
  {
    id: 3,
    title: "Lestari Moerdijat: Butuh Afirmasi...",
    image: "/image/lestari2.png",
    status: "Rejected",
    category: "News",
    date: "2024-01-20",
  },
  {
    id: 4,
    title: "Lestari Moerdijat: Butuh Afirmasi...",
    image: "/image/lestari2.png",
    status: "Draft",
    category: "News",
    date: "2024-01-20",
  },
];

const getStatusStyle = (status: string) => {
  switch (status) {
    case "Pending Approval":
      return "bg-yellow-100 text-yellow-700 border border-yellow-200";

    case "Approved":
      return "bg-green-100 text-green-700 border border-green-200";

    case "Rejected":
      return "bg-red-100 text-red-700 border border-red-200";

    case "Draft":
      return "bg-slate-100 text-slate-600 border border-slate-200";

    default:
      return "";
  }
};

export default function MyContent() {
  const [search, setSearch] = useState("");

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-semibold">My Content</h1>
        <p className="text-sm text-muted-foreground">
          Track all your content submissions and drafts
        </p>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
        {stats.map((item, index) => (
          <Card key={index} className="rounded-2xl shadow-sm">
            <CardContent className="p-5 flex items-center gap-4">
              <div
                className={`w-12 h-12 rounded-xl flex items-center justify-center text-white ${item.color}`}
              >
                {item.value}
              </div>
              <div>
                <p className="text-lg font-semibold">{item.value}</p>
                <p className="text-sm text-muted-foreground">{item.title}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="flex flex-col md:flex-row gap-3 md:items-center md:justify-between">
        <div className="relative w-full md:max-w-md">
          <Search className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
          <Input
            placeholder="Search media files..."
            className="pl-9"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>

        <Button variant="outline" className="gap-2">
          <Filter className="w-4 h-4" />
          Filters
        </Button>
      </div>

      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {contents.map((item) => (
          <Card
            key={item.id}
            className="rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all duration-200 bg-white"
          >
            <div className="flex items-center gap-1 px-3">
              <Badge className={getStatusStyle(item.status)}>
                {item.status}
              </Badge>

              <Badge
                variant="outline"
                className="text-blue-600 border-blue-200 bg-blue-50"
              >
                {item.category}
              </Badge>
            </div>

            <div className="relative w-full h-50  overflow-hidden">
              <Image
                src={item.image}
                alt={item.title}
                fill
                className="object-cover"
              />
            </div>

            <CardContent className="px-4">
              {/* TITLE */}
              <h3 className="text-sm font-semibold leading-snug line-clamp-2">
                {item.title}
              </h3>

              <p className="text-xs text-slate-500">{item.date}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="flex justify-center items-center gap-2 mt-8">
        <Button variant="outline" size="sm" className="rounded-lg">
          Previous
        </Button>

        <Button
          size="sm"
          className="rounded-lg bg-blue-600 hover:bg-blue-700 text-white"
        >
          1
        </Button>

        <Button variant="outline" size="sm" className="rounded-lg">
          2
        </Button>

        <Button variant="outline" size="sm" className="rounded-lg">
          3
        </Button>

        <Button variant="outline" size="sm" className="rounded-lg">
          Next
        </Button>
      </div>
    </div>
  );
}