import { DriveLogEntry, isCreateFileEntry, isRenameEntry } from "@/lib/drive_types"
import { DriveHeader } from "@/components/drive/DriveHeader"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { formatFileSize } from "@/lib/utils"
import Link from "next/link"

interface HistoryViewProps {
  entries: DriveLogEntry[]
  currentPage: number
  hasNextPage: boolean
  hasPrevPage: boolean
  totalEntries: number
}

function formatDateTime(timestamp: number): string {
  return new Date(timestamp * 1000).toLocaleString()
}

function PaginationControls({ currentPage, hasNextPage, hasPrevPage }: { 
  currentPage: number
  hasNextPage: boolean
  hasPrevPage: boolean
}) {
  return (
    <div className="flex items-center justify-center gap-2">
      <Link href={`/history?page=${currentPage - 1}`}>
        <Button 
          variant="outline" 
          size="sm" 
          disabled={!hasPrevPage}
          className={!hasPrevPage ? "opacity-50 cursor-not-allowed" : ""}
        >
          <ChevronLeft className="h-4 w-4 mr-1" />
          Previous
        </Button>
      </Link>
      
      <span className="text-sm text-muted-foreground px-4">
        Page {currentPage + 1}
      </span>
      
      <Link href={`/history?page=${currentPage + 1}`}>
        <Button 
          variant="outline" 
          size="sm" 
          disabled={!hasNextPage}
          className={!hasNextPage ? "opacity-50 cursor-not-allowed" : ""}
        >
          Next
          <ChevronRight className="h-4 w-4 ml-1" />
        </Button>
      </Link>
    </div>
  )
}

export function HistoryView({ entries, currentPage, hasNextPage, hasPrevPage, totalEntries }: HistoryViewProps) {
  return (
    <div className="container mx-auto p-6 space-y-6">
      <DriveHeader />
      
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-bold">Activity History</h1>
          <div className="text-sm text-muted-foreground">
            Showing {entries.length} of {totalEntries} entries
          </div>
        </div>

        <PaginationControls 
          currentPage={currentPage}
          hasNextPage={hasNextPage}
          hasPrevPage={hasPrevPage}
        />

        <div className="border rounded-lg">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Timestamp</TableHead>
                <TableHead>Action</TableHead>
                <TableHead>User</TableHead>
                <TableHead>Path</TableHead>
                <TableHead>Size</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {entries.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
                    No activity history found
                  </TableCell>
                </TableRow>
              ) : (
                entries.map((entry) => (
                  <TableRow key={entry.revision} className="hover:bg-muted/50">
                    <TableCell className="font-mono text-sm">
                      {formatDateTime(entry.timestamp)}
                    </TableCell>
                    <TableCell>
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                        {entry.action}
                      </span>
                    </TableCell>
                    <TableCell className="font-medium">
                      {entry.email}
                    </TableCell>
                    <TableCell className="font-mono text-sm max-w-md truncate">
                      {isCreateFileEntry(entry) ? (
                        <Link 
                          href={`/blob/${entry.blob_id}?filename=${encodeURIComponent(entry.path.split('/').pop() || 'download')}`}
                          className="text-blue-600 hover:text-blue-800 hover:underline"
                          title={entry.path}
                        >
                          {entry.path}
                        </Link>
                      ) : isRenameEntry(entry) ? (
                        <span title={`${entry.old_path} → ${entry.new_path}`}>
                          {entry.old_path} → {entry.new_path}
                        </span>
                      ) : (
                        <span title={'path' in entry ? entry.path : ''}>
                          {'path' in entry ? entry.path : ''}
                        </span>
                      )}
                    </TableCell>
                    <TableCell>
                      {isCreateFileEntry(entry) ? formatFileSize(entry.size) : '-'}
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>

        <PaginationControls 
          currentPage={currentPage}
          hasNextPage={hasNextPage}
          hasPrevPage={hasPrevPage}
        />
      </div>
    </div>
  )
}