"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
  description: string
}

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

const contactDataFields: CategoryGroup[] = [
  {
    category: "User Input",
    fields: [
      {
        field: "name",
        type: "string",
        source: "ContactData",
        description: "User's name from the contact form input",
      },
      {
        field: "email",
        type: "string",
        source: "ContactData",
        description: "User's email address from the contact form input",
      },
      {
        field: "topic",
        type: "string",
        source: "ContactData",
        description: "Selected topic from the dropdown (e.g., Sales, Support, Partnership)",
      },
      {
        field: "message",
        type: "string",
        source: "ContactData",
        description: "The main message content from the user",
      },
    ],
  },
  {
    category: "User Context",
    fields: [
      {
        field: "user.id",
        type: "string",
        source: "ContactUser",
        description: "Unique identifier for the logged-in user",
      },
      {
        field: "user.email",
        type: "string",
        source: "ContactUser",
        description: "Pre-filled email from authenticated user session",
      },
      {
        field: "user.name",
        type: "string",
        source: "ContactUser",
        description: "Pre-filled name from authenticated user session",
      },
    ],
  },
  {
    category: "App Context",
    fields: [
      {
        field: "context",
        type: "Record<string, unknown>",
        source: "ContactData",
        description: "App-specific context data (e.g., current page, feature flags, session info)",
      },
    ],
  },
  {
    category: "Auto-Captured Metadata",
    fields: [
      {
        field: "metadata.url",
        type: "string",
        source: "ContactMetadata",
        description: "Current page URL where the contact form was submitted",
      },
      {
        field: "metadata.timestamp",
        type: "string",
        source: "ContactMetadata",
        description: "ISO 8601 timestamp of form submission",
      },
      {
        field: "metadata.viewport.width",
        type: "number",
        source: "ContactMetadata",
        description: "Browser viewport width in pixels",
      },
      {
        field: "metadata.viewport.height",
        type: "number",
        source: "ContactMetadata",
        description: "Browser viewport height in pixels",
      },
      {
        field: "metadata.userAgent",
        type: "string",
        source: "ContactMetadata",
        description: "Browser user agent string for device/browser identification",
      },
    ],
  },
]

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

export function ContactActivityTable({
  className,
  showCategories = true,
}: ContactActivityTableProps) {
  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>
          {contactDataFields.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 ContactRecord {
  id: string
  name: string
  email: string
  topic: string
  message: string
  status: "new" | "in-progress" | "resolved"
  page: string
  timestamp: string
  device: string
}

const sampleContactRecords: ContactRecord[] = [
  {
    id: "ct_001",
    name: "Jane Doe",
    email: "jane.doe@example.com",
    topic: "Support",
    message: "I'm having trouble logging into my account after the recent update. The page just keeps loading indefinitely.",
    status: "new",
    page: "/login",
    timestamp: "2026-01-29T21:45:32Z",
    device: "Desktop",
  },
  {
    id: "ct_002",
    name: "Michael Brown",
    email: "m.brown@techstartup.io",
    topic: "Sales",
    message: "We're interested in the enterprise plan for our team of 50. Can we schedule a demo?",
    status: "in-progress",
    page: "/pricing",
    timestamp: "2026-01-29T20:30:15Z",
    device: "Desktop",
  },
  {
    id: "ct_003",
    name: "Emily Johnson",
    email: "emily.j@agency.co",
    topic: "Partnership",
    message: "We'd love to explore integration opportunities with your API for our client projects.",
    status: "new",
    page: "/integrations",
    timestamp: "2026-01-29T19:12:44Z",
    device: "Mobile",
  },
  {
    id: "ct_004",
    name: "David Kim",
    email: "dkim@enterprise.com",
    topic: "Support",
    message: "The webhook notifications stopped working yesterday. Our team relies on this for critical workflows.",
    status: "in-progress",
    page: "/webhooks",
    timestamp: "2026-01-29T18:05:22Z",
    device: "Desktop",
  },
  {
    id: "ct_005",
    name: "Lisa Wang",
    email: "lisa@startup.io",
    topic: "Other",
    message: "Is there a way to customize the email templates? We need to match our brand guidelines.",
    status: "resolved",
    page: "/settings",
    timestamp: "2026-01-29T16:48:09Z",
    device: "Tablet",
  },
]

const statusVariants: Record<ContactRecord["status"], "default" | "warning" | "secondary"> = {
  "new": "default",
  "in-progress": "warning",
  "resolved": "secondary",
}

const statusLabels: Record<ContactRecord["status"], string> = {
  "new": "New",
  "in-progress": "In Progress",
  "resolved": "Resolved",
}

export interface ContactSampleDataProps {
  className?: string
}

export function ContactSampleData({ className }: ContactSampleDataProps) {
  return (
    <div className={cn("w-full max-w-7xl overflow-hidden", className)}>
      <Table>
        <TableHeader>
          <TableRow className="bg-muted/50">
            <TableHead>Status</TableHead>
            <TableHead>Contact</TableHead>
            <TableHead>Topic</TableHead>
            <TableHead>Message</TableHead>
            <TableHead>Page</TableHead>
            <TableHead>Device</TableHead>
            <TableHead>Date</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {sampleContactRecords.map((record) => (
            <TableRow key={record.id}>
              <TableCell>
                <Badge variant={statusVariants[record.status]}>
                  {statusLabels[record.status]}
                </Badge>
              </TableCell>
              <TableCell>
                <div className="flex flex-col">
                  <span className="font-medium">{record.name}</span>
                  <span className="text-muted-foreground text-xs">{record.email}</span>
                </div>
              </TableCell>
              <TableCell>
                <Badge variant="outline">{record.topic}</Badge>
              </TableCell>
              <TableCell className="max-w-xs">
                <span className="line-clamp-2">{record.message}</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>
  )
}