import type { Meta, StoryObj } from "@storybook/react";
import { DataTable } from "./index";
import type { Column } from "./types";

interface User extends Record<string, unknown> {
  id: number;
  name: string;
  email: string;
  status: "active" | "inactive" | "pending";
  balance: number;
  lastLogin: string;
}

const columns: Column<User>[] = [
  {
    key: "id",
    header: "ID",
    cell: (row) => row.id,
    width: "80px",
    sortable: true,
  },
  {
    key: "name",
    header: "Name",
    cell: (row) => (
      <div className="flex items-center gap-2">
        <div className="h-8 w-8 rounded-full bg-[#2c2c2c] flex items-center justify-center text-xs font-bold">
          {row.name.charAt(0)}
        </div>
        <span>{row.name}</span>
      </div>
    ),
    sortable: true,
  },
  {
    key: "email",
    header: "Email",
    cell: (row) => row.email,
  },
  {
    key: "status",
    header: "Status",
    cell: (row) => {
      const statusColors = {
        active: "text-[#00ffcc]",
        inactive: "text-[#a0a0a0]",
        pending: "text-[#ffaa00]",
      };
      return <span className={statusColors[row.status]}>{row.status}</span>;
    },
    sortable: true,
    align: "center",
  },
  {
    key: "balance",
    header: "Balance",
    cell: (row) => `$${row.balance.toLocaleString()}`,
    sortable: true,
    align: "right",
  },
  {
    key: "lastLogin",
    header: "Last Login",
    cell: (row) => row.lastLogin,
  },
];

const mockData: User[] = [
  {
    id: 1,
    name: "Alice Johnson",
    email: "alice@example.com",
    status: "active",
    balance: 12500.0,
    lastLogin: "2024-02-26 10:30",
  },
  {
    id: 2,
    name: "Bob Smith",
    email: "bob@example.com",
    status: "inactive",
    balance: 8750.5,
    lastLogin: "2024-02-25 15:45",
  },
  {
    id: 3,
    name: "Charlie Brown",
    email: "charlie@example.com",
    status: "active",
    balance: 23400.75,
    lastLogin: "2024-02-26 09:15",
  },
  {
    id: 4,
    name: "Diana Prince",
    email: "diana@example.com",
    status: "pending",
    balance: 5600.0,
    lastLogin: "2024-02-24 14:20",
  },
  {
    id: 5,
    name: "Eve Davis",
    email: "eve@example.com",
    status: "active",
    balance: 18900.25,
    lastLogin: "2024-02-26 11:00",
  },
];

const meta: Meta<typeof DataTable<User>> = {
  title: "Composite/DataTable",
  component: DataTable,
  tags: ["autodocs"],
  parameters: {
    layout: "padded",
  },
  argTypes: {
    data: {
      control: "object",
      description: "Array of data objects to display",
    },
    columns: {
      control: "object",
      description: "Array of column definitions",
    },
    isLoading: {
      control: "boolean",
      description: "Show loading skeleton state",
    },
    sortable: {
      control: "boolean",
      description: "Enable column sorting",
    },
    pagination: {
      control: "boolean",
      description: "Enable pagination",
    },
    pageSize: {
      control: "number",
      description: "Number of rows per page",
    },
    stickyHeader: {
      control: "boolean",
      description: "Make header sticky on scroll",
    },
  },
};

export default meta;
type Story = StoryObj<typeof DataTable<User>>;

export const Default: Story = {
  args: {
    data: mockData,
    columns,
    sortable: false,
    pagination: false,
    stickyHeader: true,
  },
};

export const WithSorting: Story = {
  args: {
    data: mockData,
    columns,
    sortable: true,
    pagination: false,
    stickyHeader: true,
  },
};

export const WithPagination: Story = {
  args: {
    data: [
      ...mockData,
      ...mockData.map((u) => ({ ...u, id: u.id + 5 })),
      ...mockData.map((u) => ({ ...u, id: u.id + 10 })),
    ],
    columns,
    sortable: true,
    pagination: true,
    pageSize: 5,
    stickyHeader: true,
  },
};

export const Loading: Story = {
  args: {
    data: [],
    columns,
    isLoading: true,
    sortable: false,
    pagination: false,
    stickyHeader: true,
  },
};

export const EmptyState: Story = {
  args: {
    data: [],
    columns,
    isLoading: false,
    emptyState: (
      <div className="py-12 text-center">
        <p className="text-sm text-[#a0a0a0]">No users found</p>
        <p className="text-xs text-[#666666] mt-1">
          Try adjusting your filters
        </p>
      </div>
    ),
    sortable: false,
    pagination: false,
    stickyHeader: true,
  },
};

export const WithRowClick: Story = {
  args: {
    data: mockData,
    columns,
    sortable: true,
    pagination: false,
    stickyHeader: true,
    onRowClick: (row) => alert(`Clicked on ${row.name}`),
  },
};

export const ColumnAlignment: Story = {
  args: {
    data: mockData,
    columns: [
      {
        key: "name",
        header: "Name",
        cell: (row) => row.name,
        align: "left",
      },
      {
        key: "status",
        header: "Status",
        cell: (row) => row.status,
        align: "center",
      },
      {
        key: "balance",
        header: "Balance",
        cell: (row) => `$${row.balance.toLocaleString()}`,
        align: "right",
      },
    ],
    sortable: false,
    pagination: false,
    stickyHeader: true,
  },
};

export const CustomWidths: Story = {
  args: {
    data: mockData,
    columns: [
      {
        key: "id",
        header: "ID",
        cell: (row) => row.id,
        width: "60px",
      },
      {
        key: "name",
        header: "Name",
        cell: (row) => row.name,
        width: "200px",
      },
      {
        key: "email",
        header: "Email",
        cell: (row) => row.email,
        width: "250px",
      },
      {
        key: "status",
        header: "Status",
        cell: (row) => row.status,
        width: "100px",
      },
      {
        key: "balance",
        header: "Balance",
        cell: (row) => `$${row.balance.toLocaleString()}`,
        width: "150px",
      },
    ],
    sortable: true,
    pagination: false,
    stickyHeader: true,
  },
};

export const ComplexCells: Story = {
  args: {
    data: mockData,
    columns: [
      {
        key: "user",
        header: "User Info",
        cell: (row) => (
          <div className="flex flex-col">
            <span className="font-bold">{row.name}</span>
            <span className="text-xs text-[#a0a0a0]">{row.email}</span>
          </div>
        ),
      },
      {
        key: "status",
        header: "Status",
        cell: (row) => {
          const statusStyles = {
            active: "bg-[#00ffcc]/20 text-[#00ffcc]",
            inactive: "bg-[#a0a0a0]/20 text-[#a0a0a0]",
            pending: "bg-[#ffaa00]/20 text-[#ffaa00]",
          };
          return (
            <span
              className={`px-2 py-1 rounded text-xs font-bold uppercase ${
                statusStyles[row.status]
              }`}
            >
              {row.status}
            </span>
          );
        },
      },
      {
        key: "balance",
        header: "Account Balance",
        cell: (row) => (
          <div className="flex flex-col items-end">
            <span className="font-bold text-[#00ffcc]">
              ${row.balance.toLocaleString()}
            </span>
            <span className="text-xs text-[#a0a0a0]">USD</span>
          </div>
        ),
      },
      {
        key: "lastLogin",
        header: "Last Activity",
        cell: (row) => (
          <div className="flex flex-col">
            <span className="text-sm">{row.lastLogin.split(" ")[0]}</span>
            <span className="text-xs text-[#a0a0a0]">
              {row.lastLogin.split(" ")[1]}
            </span>
          </div>
        ),
      },
    ],
    sortable: false,
    pagination: false,
    stickyHeader: true,
  },
};
