"use client"

import { cn } from "@mdxui/primitives/lib/utils"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@mdxui/primitives/table"
import { Badge } from "@mdxui/primitives/badge"

interface FieldInfo {
  field: string
  type: string
  source: string
  required: boolean
  description: string
}

interface CategoryGroup {
  category: string
  fields: FieldInfo[]
}

const feedbackDataFields: CategoryGroup[] = [
  {
    category: "User Input",
    fields: [
      {
        field: "sentiment",
        type: "Sentiment",
        source: "FeedbackData",
        required: true,
        description:
          "User's satisfaction level: very-dissatisfied, dissatisfied, neutral, satisfied, very-satisfied",
      },
      {
        field: "message",
        type: "string",
        source: "FeedbackData",
        required: false,
        description: "Optional text feedback message from the user",
      },
    ],
  },
  {
    category: "User Context",
    fields: [
      {
        field: "user.id",
        type: "string",
        source: "FeedbackUser",
        required: false,
        description: "Unique identifier for the user",
      },
      {
        field: "user.email",
        type: "string",
        source: "FeedbackUser",
        required: false,
        description: "User's email address",
      },
      {
        field: "user.name",
        type: "string",
        source: "FeedbackUser",
        required: false,
        description: "User's display name",
      },
    ],
  },
  {
    category: "App Context",
    fields: [
      {
        field: "context",
        type: "Record<string, unknown>",
        source: "FeedbackData",
        required: false,
        description:
          "App-specific context data (e.g., conversationId, featureName, pageSection)",
      },
    ],
  },
  {
    category: "Auto-Captured Metadata",
    fields: [
      {
        field: "metadata.url",
        type: "string",
        source: "FeedbackMetadata",
        required: true,
        description: "Current page URL when feedback was submitted",
      },
      {
        field: "metadata.timestamp",
        type: "string",
        source: "FeedbackMetadata",
        required: true,
        description: "ISO timestamp of when feedback was submitted",
      },
      {
        field: "metadata.viewport.width",
        type: "number",
        source: "FeedbackMetadata",
        required: true,
        description: "Browser viewport width in pixels",
      },
      {
        field: "metadata.viewport.height",
        type: "number",
        source: "FeedbackMetadata",
        required: true,
        description: "Browser viewport height in pixels",
      },
      {
        field: "metadata.userAgent",
        type: "string",
        source: "FeedbackMetadata",
        required: true,
        description: "Browser user agent string for device/browser identification",
      },
    ],
  },
]

export interface FeedbackActivityTableProps {
  className?: string
  showCategories?: boolean
}

export function FeedbackActivityTable({
  className,
  showCategories = true,
}: FeedbackActivityTableProps) {
  return (
    <div className={cn("w-full max-w-7xl overflow-hidden", className)}>
      <Table>
        <TableHeader>
          <TableRow className="bg-muted/50">
            <TableHead>Field</TableHead>
            <TableHead>Type</TableHead>
            <TableHead>Source</TableHead>
            <TableHead>Description</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {feedbackDataFields.map((group, groupIndex) => (
            <>
              {showCategories && (
                <TableRow key={`category-${groupIndex}`} className="bg-muted/30">
                  <TableCell
                    colSpan={4}
                    className="font-medium text-foreground/80 text-xs uppercase tracking-wider"
                  >
                    {group.category}
                  </TableCell>
                </TableRow>
              )}
              {group.fields.map((field, fieldIndex) => (
                <TableRow key={`${groupIndex}-${fieldIndex}`}>
                  <TableCell>
                    <code className="rounded-[var(--radius-sm)] bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground">
                      {field.field}
                    </code>
                  </TableCell>
                  <TableCell>
                    <code className="rounded-[var(--radius-sm)] bg-primary/10 px-1.5 py-0.5 font-mono text-xs text-primary">
                      {field.type}
                    </code>
                  </TableCell>
                  <TableCell className="text-muted-foreground">
                    {field.source}
                  </TableCell>
                  <TableCell className="text-muted-foreground max-w-md">
                    {field.description}
                  </TableCell>
                </TableRow>
              ))}
            </>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}

// Dashboard-style sample data component
interface FeedbackRecord {
  id: string
  sentiment: "very-dissatisfied" | "dissatisfied" | "neutral" | "satisfied" | "very-satisfied"
  message?: string
  userName?: string
  userEmail?: string
  page: string
  timestamp: string
  device: string
}

const sampleFeedbackRecords: FeedbackRecord[] = [
  {
    id: "fb_001",
    sentiment: "very-satisfied",
    message: "The new dashboard design is much cleaner. Love the dark mode!",
    userName: "Alex Smith",
    userEmail: "alex.smith@company.com",
    page: "/dashboard",
    timestamp: "2026-01-29T21:42:15Z",
    device: "Desktop",
  },
  {
    id: "fb_002",
    sentiment: "dissatisfied",
    message: "The loading time is too slow on mobile. Please optimize.",
    userName: "Maria Garcia",
    userEmail: "maria.g@startup.io",
    page: "/reports",
    timestamp: "2026-01-29T20:15:33Z",
    device: "Mobile",
  },
  {
    id: "fb_003",
    sentiment: "satisfied",
    message: undefined,
    userName: "James Wilson",
    userEmail: "jwilson@enterprise.com",
    page: "/settings",
    timestamp: "2026-01-29T19:08:47Z",
    device: "Desktop",
  },
  {
    id: "fb_004",
    sentiment: "neutral",
    message: "It's okay, but I expected more features in the pro plan.",
    userName: undefined,
    userEmail: undefined,
    page: "/pricing",
    timestamp: "2026-01-29T18:22:11Z",
    device: "Tablet",
  },
  {
    id: "fb_005",
    sentiment: "very-dissatisfied",
    message: "Can't export my data. This is a critical bug!",
    userName: "Sarah Chen",
    userEmail: "sarah@bigcorp.com",
    page: "/export",
    timestamp: "2026-01-29T17:55:02Z",
    device: "Desktop",
  },
]

const sentimentLabels: Record<FeedbackRecord["sentiment"], string> = {
  "very-dissatisfied": "Very Dissatisfied",
  "dissatisfied": "Dissatisfied",
  "neutral": "Neutral",
  "satisfied": "Satisfied",
  "very-satisfied": "Very Satisfied",
}

const sentimentVariants: Record<FeedbackRecord["sentiment"], "destructive" | "warning" | "secondary" | "default"> = {
  "very-dissatisfied": "destructive",
  "dissatisfied": "warning",
  "neutral": "secondary",
  "satisfied": "default",
  "very-satisfied": "default",
}

export interface FeedbackSampleDataProps {
  className?: string
}

export function FeedbackSampleData({ className }: FeedbackSampleDataProps) {
  return (
    <div className={cn("w-full max-w-7xl overflow-hidden", className)}>
      <Table>
        <TableHeader>
          <TableRow className="bg-muted/50">
            <TableHead>Sentiment</TableHead>
            <TableHead>Message</TableHead>
            <TableHead>User</TableHead>
            <TableHead>Page</TableHead>
            <TableHead>Device</TableHead>
            <TableHead>Date</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {sampleFeedbackRecords.map((record) => (
            <TableRow key={record.id}>
              <TableCell>
                <Badge variant={sentimentVariants[record.sentiment]}>
                  {sentimentLabels[record.sentiment]}
                </Badge>
              </TableCell>
              <TableCell className="max-w-xs">
                {record.message ? (
                  <span className="line-clamp-2">{record.message}</span>
                ) : (
                  <span className="text-muted-foreground italic">No message</span>
                )}
              </TableCell>
              <TableCell>
                {record.userName ? (
                  <div className="flex flex-col">
                    <span className="font-medium">{record.userName}</span>
                    <span className="text-muted-foreground text-xs">{record.userEmail}</span>
                  </div>
                ) : (
                  <span className="text-muted-foreground italic">Anonymous</span>
                )}
              </TableCell>
              <TableCell>
                <code className="rounded-[var(--radius-sm)] bg-muted px-1.5 py-0.5 font-mono text-xs">
                  {record.page}
                </code>
              </TableCell>
              <TableCell className="text-muted-foreground">
                {record.device}
              </TableCell>
              <TableCell className="text-muted-foreground text-xs">
                {new Date(record.timestamp).toLocaleDateString("en-US", {
                  month: "short",
                  day: "numeric",
                  hour: "2-digit",
                  minute: "2-digit",
                })}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}