'use client'

import { useState } from 'react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import {
  Upload,
  Rocket,
  Plus,
  Edit2,
  Trash2,
  Eye,
  Globe,
  Clock,
  AlertCircle,
  CheckCircle,
} from 'lucide-react'

interface PortfolioItem {
  id: number
  name: string
  domain: string
  status: 'active' | 'inactive' | 'deploying' | 'failed'
  url?: string
  uploadedAt: string
  lastUpdated: string
}

interface PortfolioDashboardProps {
  portfolios?: PortfolioItem[]
  onEdit?: (id: number) => void
  onDelete?: (id: number) => void
  onDeploy?: (id: number) => void
  onUpload?: (id: number) => void
}

const defaultPortfolios: PortfolioItem[] = [
  {
    id: 1,
    name: 'Personal Website',
    domain: 'myportfolio.com',
    status: 'active',
    url: 'https://myportfolio.com',
    uploadedAt: '2025-10-15',
    lastUpdated: '2025-10-17',
  },
  {
    id: 2,
    name: 'Design Showcase',
    domain: 'designs.myportfolio.com',
    status: 'inactive',
    uploadedAt: '2025-10-10',
    lastUpdated: '2025-10-10',
  },
]

export default function PortfolioDashboard({
  portfolios = defaultPortfolios,
  onEdit = () => {},
  onDelete = () => {},
  onDeploy = () => {},
  onUpload = () => {},
}: PortfolioDashboardProps) {
  const [view, setView] = useState<'grid' | 'list'>('grid')
  const [selectedPortfolio, setSelectedPortfolio] = useState<number | null>(null)

  const getStatusBadge = (status: string) => {
    const statusConfig = {
      active: {
        bg: 'bg-green-100',
        text: 'text-green-800',
        icon: CheckCircle,
        label: 'Active',
      },
      inactive: {
        bg: 'bg-gray-100',
        text: 'text-gray-800',
        icon: Clock,
        label: 'Inactive',
      },
      deploying: {
        bg: 'bg-blue-100',
        text: 'text-blue-800',
        icon: Rocket,
        label: 'Deploying',
      },
      failed: {
        bg: 'bg-red-100',
        text: 'text-red-800',
        icon: AlertCircle,
        label: 'Failed',
      },
    }

    const config = statusConfig[status as keyof typeof statusConfig]
    const Icon = config.icon

    return (
      <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${config.bg} ${config.text}`}>
        <Icon size={16} />
        <span className="text-sm font-medium">{config.label}</span>
      </div>
    )
  }

  return (
    <div className="bg-white rounded-lg shadow-md">
      {/* Header */}
      <div className="border-b p-6">
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
          <div>
            <h2 className="text-2xl font-bold">Portfolio Management</h2>
            <p className="text-muted-foreground mt-1">Manage and monitor your hosted portfolios</p>
          </div>

          <div className="flex gap-2">
            <button
              onClick={() => setView('grid')}
              className={`px-4 py-2 rounded-md transition ${
                view === 'grid'
                  ? 'bg-primary text-white'
                  : 'bg-gray-100 text-foreground hover:bg-gray-200'
              }`}
              aria-label="Grid view"
            >
              Grid
            </button>
            <button
              onClick={() => setView('list')}
              className={`px-4 py-2 rounded-md transition ${
                view === 'list'
                  ? 'bg-primary text-white'
                  : 'bg-gray-100 text-foreground hover:bg-gray-200'
              }`}
              aria-label="List view"
            >
              List
            </button>
          </div>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 p-6 border-b">
        <div className="p-4 bg-blue-50 rounded-lg">
          <p className="text-sm text-muted-foreground">Total Portfolios</p>
          <p className="text-2xl font-bold">{portfolios.length}</p>
        </div>
        <div className="p-4 bg-green-50 rounded-lg">
          <p className="text-sm text-muted-foreground">Active</p>
          <p className="text-2xl font-bold">
            {portfolios.filter((p) => p.status === 'active').length}
          </p>
        </div>
        <div className="p-4 bg-yellow-50 rounded-lg">
          <p className="text-sm text-muted-foreground">Inactive</p>
          <p className="text-2xl font-bold">
            {portfolios.filter((p) => p.status === 'inactive').length}
          </p>
        </div>
        <div className="p-4 bg-red-50 rounded-lg">
          <p className="text-sm text-muted-foreground">Failed</p>
          <p className="text-2xl font-bold">
            {portfolios.filter((p) => p.status === 'failed').length}
          </p>
        </div>
      </div>

      {/* Content */}
      <div className="p-6">
        {portfolios.length === 0 ? (
          <div className="text-center py-12">
            <Globe size={48} className="mx-auto text-gray-300 mb-4" />
            <p className="text-lg font-medium mb-2">No portfolios yet</p>
            <p className="text-muted-foreground mb-6">Create your first portfolio to get started</p>
            <Button>
              <Plus className="mr-2" size={18} />
              Create Portfolio
            </Button>
          </div>
        ) : view === 'grid' ? (
          /* Grid View */
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {portfolios.map((portfolio) => (
              <div
                key={portfolio.id}
                className="border rounded-lg hover:shadow-lg transition p-4 cursor-pointer"
                onClick={() => setSelectedPortfolio(portfolio.id)}
              >
                <div className="mb-4">
                  {getStatusBadge(portfolio.status)}
                </div>

                <h3 className="text-lg font-semibold mb-2">{portfolio.name}</h3>
                <p className="text-sm text-muted-foreground mb-4">
                  <Globe size={16} className="inline mr-1" />
                  {portfolio.domain}
                </p>

                <div className="space-y-2 mb-4 text-xs text-muted-foreground">
                  <p>Uploaded: {new Date(portfolio.uploadedAt).toLocaleDateString()}</p>
                  <p>Last Updated: {new Date(portfolio.lastUpdated).toLocaleDateString()}</p>
                </div>

                <div className="flex gap-2">
                  {portfolio.url && portfolio.status === 'active' && (
                    <Button
                      onClick={(e) => {
                        e.stopPropagation()
                        window.open(portfolio.url, '_blank')
                      }}
                      variant="outline"
                      size="sm"
                      className="flex-1"
                    >
                      <Eye size={16} className="mr-1" />
                      View
                    </Button>
                  )}
                  <Button
                    onClick={(e) => {
                      e.stopPropagation()
                      onEdit(portfolio.id)
                    }}
                    variant="outline"
                    size="sm"
                    className="flex-1"
                  >
                    <Edit2 size={16} className="mr-1" />
                    Edit
                  </Button>
                  <Button
                    onClick={(e) => {
                      e.stopPropagation()
                      onDelete(portfolio.id)
                    }}
                    variant="outline"
                    size="sm"
                    className="flex-1 text-red-600 hover:text-red-700"
                  >
                    <Trash2 size={16} />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        ) : (
          /* List View */
          <div className="space-y-3">
            {portfolios.map((portfolio) => (
              <div
                key={portfolio.id}
                className="border rounded-lg p-4 hover:bg-gray-50 transition cursor-pointer flex items-center justify-between"
                onClick={() => setSelectedPortfolio(portfolio.id)}
              >
                <div className="flex-1">
                  <div className="flex items-center gap-4 mb-2">
                    <h3 className="text-lg font-semibold">{portfolio.name}</h3>
                    {getStatusBadge(portfolio.status)}
                  </div>
                  <p className="text-sm text-muted-foreground">
                    <Globe size={16} className="inline mr-2" />
                    {portfolio.domain}
                  </p>
                </div>

                <div className="flex gap-2 ml-4">
                  {portfolio.url && portfolio.status === 'active' && (
                    <Button
                      onClick={(e) => {
                        e.stopPropagation()
                        window.open(portfolio.url, '_blank')
                      }}
                      variant="outline"
                      size="sm"
                    >
                      <Eye size={16} />
                    </Button>
                  )}
                  <Button
                    onClick={(e) => {
                      e.stopPropagation()
                      onUpload(portfolio.id)
                    }}
                    variant="outline"
                    size="sm"
                  >
                    <Upload size={16} />
                  </Button>
                  <Button
                    onClick={(e) => {
                      e.stopPropagation()
                      onEdit(portfolio.id)
                    }}
                    variant="outline"
                    size="sm"
                  >
                    <Edit2 size={16} />
                  </Button>
                  <Button
                    onClick={(e) => {
                      e.stopPropagation()
                      onDelete(portfolio.id)
                    }}
                    variant="outline"
                    size="sm"
                    className="text-red-600 hover:text-red-700"
                  >
                    <Trash2 size={16} />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}