import { Button } from "@/components/ui/button";
import { Calendar } from "lucide-react";
import type {
  DashboardMetricCardItem,
  DashboardTableColumn,
  DashboardTabOption,
  LatestReleaseRow,
  LatestTicketRow,
} from "./dashboard-home-types";
import { DashboardSectionCard } from "./dashboard-section-card";
import { DashboardStatCard } from "./dashboard-stat-card";
import { DashboardTable } from "./dashboard-table";

interface DashboardHomeViewProps {
  dateRangeLabel: string;
  emptyMessage: string;
  viewAllLabel: string;
  releaseStatsTabs: DashboardTabOption[];
  activeReleaseStatsTab: string;
  onReleaseStatsTabChange: (tabId: string) => void;
  releaseStatsCards: DashboardMetricCardItem[];
  ticketStatsTitle: string;
  ticketStatsCards: DashboardMetricCardItem[];
  onViewTicketStats?: () => void;
  latestReleasesTabs: DashboardTabOption[];
  activeLatestReleasesTab: string;
  onLatestReleasesTabChange: (tabId: string) => void;
  latestReleasesRows: LatestReleaseRow[];
  latestReleasesColumns: DashboardTableColumn<LatestReleaseRow>[];
  onViewLatestReleases?: () => void;
  latestTicketsTitle: string;
  latestTicketsRows: LatestTicketRow[];
  latestTicketsColumns: DashboardTableColumn<LatestTicketRow>[];
  onViewLatestTickets?: () => void;
}

export function DashboardHomeView({
  dateRangeLabel,
  emptyMessage,
  viewAllLabel,
  releaseStatsTabs,
  activeReleaseStatsTab,
  onReleaseStatsTabChange,
  releaseStatsCards,
  ticketStatsTitle,
  ticketStatsCards,
  onViewTicketStats,
  latestReleasesTabs,
  activeLatestReleasesTab,
  onLatestReleasesTabChange,
  latestReleasesRows,
  latestReleasesColumns,
  onViewLatestReleases,
  latestTicketsTitle,
  latestTicketsRows,
  latestTicketsColumns,
  onViewLatestTickets,
}: DashboardHomeViewProps) {
  return (
    <div className="space-y-6">
      <DashboardSectionCard
        tabs={releaseStatsTabs}
        activeTabId={activeReleaseStatsTab}
        onTabChange={onReleaseStatsTabChange}

      >
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
          {releaseStatsCards.map((card) => (
            <DashboardStatCard key={card.id} item={card} />
          ))}
        </div>
      </DashboardSectionCard>

      <DashboardSectionCard
        title={ticketStatsTitle}
        actionLabel={viewAllLabel}
        onActionClick={onViewTicketStats}
      >
        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
          {ticketStatsCards.map((card) => (
            <DashboardStatCard key={card.id} item={card} />
          ))}
        </div>
      </DashboardSectionCard>

      <DashboardSectionCard
        actionLabel={viewAllLabel}
        onActionClick={onViewLatestReleases}
        tabs={latestReleasesTabs}
        activeTabId={activeLatestReleasesTab}
        onTabChange={onLatestReleasesTabChange}
        bodyClassName="px-6 pb-6"
      >
        <DashboardTable
          columns={latestReleasesColumns}
          rows={latestReleasesRows}
          emptyMessage={emptyMessage}
        />
      </DashboardSectionCard>

      <DashboardSectionCard
        title={latestTicketsTitle}
        actionLabel={viewAllLabel}
        onActionClick={onViewLatestTickets}
        bodyClassName="px-6 pb-6"
      >
        <DashboardTable
          columns={latestTicketsColumns}
          rows={latestTicketsRows}
          emptyMessage={emptyMessage}
        />
      </DashboardSectionCard>
    </div>
  );
}