'use client';

import * as React from 'react';

// Force dynamic rendering to avoid static generation issues with translations
export const dynamic = 'force-dynamic';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { DataTable, type DataTableColumn } from '@/components/admin/data-table';
import { useTranslation } from '@/hooks/use-translation';
import { Filter, Download } from 'lucide-react';

/**
 * EN: Message interface
 * VI: Interface cho Message
 */
interface Message {
  id: string;
  content: string;
  userId: string;
  userName: string;
  userEmail: string;
  status: 'pending' | 'approved' | 'rejected';
  createdAt: string;
  conversationId: string;
}

/**
 * EN: Messages page component
 * VI: Component trang Messages
 *
 * Features:
 * - Search and filter messages
 * - Message list with status
 * - Content moderation tools
 * - Message statistics
 */
export default function MessagesPage() {
  const { t } = useTranslation();
  const [searchQuery, setSearchQuery] = React.useState('');
  const [currentPage, setCurrentPage] = React.useState(1);
  const [selectedRows, setSelectedRows] = React.useState<string[]>([]);
  
  // EN: Mock data - replace with actual API calls / VI: Dữ liệu mock - thay thế bằng API calls thực tế
  const [messages] = React.useState<Message[]>([]);
  
  // EN: Mock columns / VI: Columns mock
  const columns: DataTableColumn<Message>[] = [
    { key: 'content', header: t('admin.messages.title'), sortable: true },
    { key: 'userName', header: t('common.user'), sortable: true },
    { key: 'status', header: t('admin.users.status'), sortable: true },
    { key: 'createdAt', header: t('admin.users.createdAt'), sortable: true },
    { key: 'actions', header: t('common.actions'), sortable: false },
  ];
  
  const handleBulkApprove = (ids: string[]) => {
    console.log('Approve messages:', ids);
  };
  
  const handleBulkReject = (ids: string[]) => {
    console.log('Reject messages:', ids);
  };
  
  const handleBulkDelete = (ids: string[]) => {
    console.log('Delete messages:', ids);
  };

  return (
    <div className="space-y-6">
      {/* EN: Page header / VI: Header trang */}
      <div>
        <h1 className="text-3xl font-bold text-text-primary">
          {t('admin.messages.title')}
        </h1>
        <p className="mt-1 text-sm text-text-tertiary">
          {t('admin.messages.description')}
        </p>
      </div>

      {/* EN: Message statistics / VI: Thống kê tin nhắn */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
        <Card>
          <CardContent className="pt-6">
            <div className="text-2xl font-bold text-text-primary">89,234</div>
            <p className="text-sm text-text-tertiary mt-1">{t('admin.messages.total')}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-2xl font-bold text-text-primary">1,234</div>
            <p className="text-sm text-text-tertiary mt-1">{t('admin.messages.today')}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-2xl font-bold text-text-primary">8,456</div>
            <p className="text-sm text-text-tertiary mt-1">{t('admin.messages.thisWeek')}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-2xl font-bold text-text-primary">34,567</div>
            <p className="text-sm text-text-tertiary mt-1">{t('admin.messages.thisMonth')}</p>
          </CardContent>
        </Card>
      </div>

      {/* EN: Search and filters card / VI: Card tìm kiếm và lọc */}
      <Card>
        <CardHeader>
          <CardTitle>{t('common.search')}</CardTitle>
          <CardDescription>
            {t('admin.messages.description')}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
            <div className="md:col-span-2">
              <Input
                type="search"
                placeholder={t('admin.messages.searchPlaceholder')}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full"
              />
            </div>
            <div className="flex gap-2">
              <Button variant="secondary" size="md" className="flex-1">
                <Filter className="h-4 w-4 mr-2" />
                {t('common.filter')}
              </Button>
              <Button variant="secondary" size="md">
                <Download className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* EN: Message list table / VI: Bảng danh sách tin nhắn */}
      <DataTable
        data={messages}
        columns={columns}
        currentPage={currentPage}
        itemsPerPage={10}
        onPageChange={setCurrentPage}
        selectable
        selectedRows={selectedRows}
        onSelectionChange={setSelectedRows}
        getRowId={(row) => row.id}
        bulkActions={[
          {
            label: t('admin.messages.approve'),
            action: handleBulkApprove,
            variant: 'primary',
          },
          {
            label: t('admin.messages.reject'),
            action: handleBulkReject,
            variant: 'secondary',
          },
          {
            label: t('common.delete'),
            action: handleBulkDelete,
            variant: 'danger',
          },
        ]}
        exportable
        onExport={() => console.log('Export messages')}
      />
    </div>
  );
}
