import { AdminLayout } from '@/components/admin/layout'
import { DataTable } from '@/components/admin/data-table'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { MessageSquare } from 'lucide-react'

const messagesData = [
  {
    id: '#MSG001',
    sender: 'John Doe',
    email: 'john@example.com',
    subject: 'Account Access Issue',
    message: 'I am unable to login to my account',
    received: '2024-03-20 10:30 AM',
    priority: 'High',
    read: true,
  },
  {
    id: '#MSG002',
    sender: 'Jane Smith',
    email: 'jane@example.com',
    subject: 'Feature Request',
    message: 'Can you add dark mode support?',
    received: '2024-03-20 09:15 AM',
    priority: 'Medium',
    read: false,
  },
  {
    id: '#MSG003',
    sender: 'Bob Johnson',
    email: 'bob@example.com',
    subject: 'Billing Question',
    message: 'When will my payment be processed?',
    received: '2024-03-19 03:45 PM',
    priority: 'Medium',
    read: true,
  },
  {
    id: '#MSG004',
    sender: 'Alice Williams',
    email: 'alice@example.com',
    subject: 'Bug Report',
    message: 'The export feature is not working properly',
    received: '2024-03-19 02:20 PM',
    priority: 'High',
    read: true,
  },
  {
    id: '#MSG005',
    sender: 'Charlie Brown',
    email: 'charlie@example.com',
    subject: 'General Inquiry',
    message: 'Is there an API available?',
    received: '2024-03-18 11:00 AM',
    priority: 'Low',
    read: false,
  },
]

export default function MessagesPage() {
  return (
    <AdminLayout>
      {/* Page Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-foreground">Messages</h1>
        <p className="text-muted-foreground text-sm mt-2">
          View and manage all user messages and inquiries.
        </p>
      </div>

      {/* Summary Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <Card className="bg-card border-border p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">Total Messages</p>
              <p className="text-2xl font-bold text-foreground mt-2">247</p>
            </div>
            <MessageSquare className="w-8 h-8 text-primary opacity-20" />
          </div>
        </Card>
        <Card className="bg-card border-border p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">Unread</p>
              <p className="text-2xl font-bold text-foreground mt-2">12</p>
            </div>
            <MessageSquare className="w-8 h-8 text-accent opacity-20" />
          </div>
        </Card>
        <Card className="bg-card border-border p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">Urgent</p>
              <p className="text-2xl font-bold text-foreground mt-2">3</p>
            </div>
            <MessageSquare className="w-8 h-8 text-destructive opacity-20" />
          </div>
        </Card>
      </div>

      {/* Messages Table */}
      <DataTable
        title="All Messages"
        searchPlaceholder="Search by sender or subject..."
        columns={[
          { key: 'id', label: 'ID' },
          { key: 'sender', label: 'Sender' },
          { key: 'subject', label: 'Subject' },
          { key: 'priority', label: 'Priority' },
          { key: 'received', label: 'Received' },
          { key: 'read', label: 'Status' },
        ]}
        data={messagesData.map((msg) => ({
          ...msg,
          priority: (
            <Badge
              className={
                msg.priority === 'High'
                  ? 'bg-red-500/20 text-red-400'
                  : msg.priority === 'Medium'
                    ? 'bg-yellow-500/20 text-yellow-400'
                    : 'bg-blue-500/20 text-blue-400'
              }
            >
              {msg.priority}
            </Badge>
          ),
          read: (
            <Badge className={msg.read ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'}>
              {msg.read ? 'Read' : 'Unread'}
            </Badge>
          ),
        }))}
        itemsPerPage={10}
      />
    </AdminLayout>
  )
}