import { useState } from "react"

interface Task {
  id: string
  title: string
  platform: "wordpress" | "substack" | "paypal" | "pinterest" | "apple-music"
  metrics?: string
}

interface Column {
  id: string
  title: string
  count: number
  date: string
  tasks: Task[]
}

const platformIcons = {
  wordpress: (
    <div className="w-5 h-5 bg-blue-600 rounded-sm flex items-center justify-center">
      <span className="text-white text-xs font-bold">W</span>
    </div>
  ),
  substack: (
    <div className="w-5 h-5 bg-orange-500 rounded-sm flex items-center justify-center">
      <span className="text-white text-xs font-bold">S</span>
    </div>
  ),
  paypal: (
    <div className="w-5 h-5 bg-blue-500 rounded-sm flex items-center justify-center">
      <span className="text-white text-xs font-bold">P</span>
    </div>
  ),
  pinterest: (
    <div className="w-5 h-5 bg-red-500 rounded-sm flex items-center justify-center">
      <span className="text-white text-xs font-bold">P</span>
    </div>
  ),
  "apple-music": (
    <div className="w-5 h-5 bg-black rounded-sm flex items-center justify-center">
      <span className="text-white text-xs font-bold">A</span>
    </div>
  ),
}

const initialData: Column[] = [
  {
    id: "published",
    title: "Published",
    count: 10,
    date: "Since 23 Oct 2025",
    tasks: [
      {
        id: "1",
        title: "Questions to ask your CPA Published o...",
        platform: "wordpress",
      },
      {
        id: "2",
        title: "Substack DR 97 DA 95",
        platform: "substack",
      },
      {
        id: "3",
        title: "Paypal DR 97 DA 95 Traffic",
        platform: "paypal",
      },
      {
        id: "4",
        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
        platform: "pinterest",
      },
      {
        id: "5",
        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
        platform: "pinterest",
      },
      {
        id: "6",
        title: "Substack DR 97 DA 95 Traffic",
        platform: "substack",
      },
      {
        id: "7",
        title: "Paypal DR 97 DA 95 Traffic 3,989,220",
        platform: "paypal",
      },
      {
        id: "8",
        title: "Apple Music DR 97 DA 95 Traffic",
        platform: "apple-music",
      },
      {
        id: "9",
        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
        platform: "pinterest",
      },
      {
        id: "10",
        title: "Questions to ask your CPA Published o...",
        platform: "wordpress",
      },
    ],
  },
  {
    id: "in-progress",
    title: "In Progress",
    count: 10,
    date: "23 Oct 2025",
    tasks: [
      {
        id: "11",
        title: "Questions to ask your CPA Published o...",
        platform: "wordpress",
      },
      {
        id: "12",
        title: "Substack DR 97 DA 95",
        platform: "substack",
      },
      {
        id: "13",
        title: "Paypal DR 97 DA 95 Traffic",
        platform: "paypal",
      },
      {
        id: "14",
        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
        platform: "pinterest",
      },
      {
        id: "15",
        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
        platform: "pinterest",
      },
      {
        id: "16",
        title: "Substack DR 97 DA 95 Traffic",
        platform: "substack",
      },
      {
        id: "17",
        title: "Paypal DR 97 DA 95 Traffic 3,989,220",
        platform: "paypal",
      },
      {
        id: "18",
        title: "Apple Music DR 97 DA 95 Traffic",
        platform: "apple-music",
      },
      {
        id: "19",
        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
        platform: "pinterest",
      },
      {
        id: "20",
        title: "Questions to ask your CPA Published o...",
        platform: "wordpress",
      },
    ],
  },
  {
    id: "next-month",
    title: "Next month",
    count: 10,
    date: "23 Nov 2025",
    tasks: [
      {
        id: "21",
        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
        platform: "pinterest",
      },
      {
        id: "22",
        title: "Substack DR 97 DA 95",
        platform: "substack",
      },
      {
        id: "23",
        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
        platform: "pinterest",
      },
      {
        id: "24",
        title: "Paypal DR 97 DA 95 Traffic",
        platform: "paypal",
      },
      {
        id: "25",
        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
        platform: "pinterest",
      },
      {
        id: "26",
        title: "Substack DR 97 DA 95 Traffic",
        platform: "substack",
      },
      {
        id: "27",
        title: "Paypal DR 97 DA 95 Traffic 3,989,220",
        platform: "paypal",
      },
      {
        id: "28",
        title: "Apple Music DR 97 DA 95 Traffic",
        platform: "apple-music",
      },
      {
        id: "29",
        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
        platform: "pinterest",
      },
      {
        id: "30",
        title: "Questions to ask your CPA Published o...",
        platform: "wordpress",
      },
    ],
  },
]

function ShowDetails() {
  const [columns, setColumns] = useState<Column[]>(initialData)

  return (
    <div className="p-2">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {columns.map((column) => (
          <div key={column.id} className="bg-white rounded-lg shadow-sm border border-gray-200 ">
            {/* Column Header */}
            <div className="p-4 border-b border-gray-200 bg-[#F6F6FA] rounded-lg flex justify-between items-center ">
              <div className="flex items-center justify-between">
                <h3 className="text-lg  font-bold text-[#2B2D3B]">{column.title}</h3>
                <span className="bg-gray-100 text-gray-600 text-sm px-2 py-1 rounded-full">{column.count}</span>
              </div>
              <p className="text-sm text-gray-500">{column.date}</p>
            </div>

            {/* Tasks List */}
            <div className="p-3 space-y-3 max-h-96 custom-scrollbar">
              {column.tasks.map((task) => (
                <div
                  key={task.id}
                  className="flex items-start gap-3 p-1 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer border-b-2 border-[#f1eeee]"
                >
                  {platformIcons[task.platform]}
                  <div className="flex-1 min-w-0">
                    <p className="text-sm line-clamp-2 leading-relaxed truncate max-w-[350px] whitespace-pre-wrap text-blue-600 hover:text-blue-800 underline">{task.title}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default ShowDetails