"use client";

import { useRouter } from "next/navigation";
import { LayoutSectionCard } from "./LayoutSectionCard";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { ArrowLeft, Plus } from "lucide-react";

interface LayoutConfiguration {
  id: number;
  name: string;
  sections: LayoutSection[];
  createdAt: string;
  updatedAt: string;
}

interface LayoutSection {
  id: number;
  name: string;
  type: string;
  sheetName: string;
  startingRow?: number;
  endingRow?: number;
  tableName: string;
  fields: LayoutSectionField[];
}

interface LayoutSectionField {
  id: number;
  name: string;
  dataType: string;
  cellPosition: string;
  importTableColumnName: string;
  importColumnOrderNumber: number;
}

interface LayoutConfigurationDetailProps {
  configuration: LayoutConfiguration;
}

export function LayoutConfigurationDetail({ configuration }: LayoutConfigurationDetailProps) {
  const router = useRouter();

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button
          variant="ghost"
          size="sm"
          onClick={() => router.push("/layout-configurations")}
        >
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back to Configurations
        </Button>
      </div>

      <Card>
        <CardHeader>
          <div className="flex justify-between items-start">
            <div>
              <CardTitle>Configuration Details</CardTitle>
              <CardDescription>
                Overview of the layout configuration and its sections
              </CardDescription>
            </div>
            <div className="flex gap-2">
              <Badge variant="secondary">
                {configuration.sections.length} sections
              </Badge>
              <Badge variant="outline">
                {configuration.sections.reduce((total, section) => total + section.fields.length, 0)} fields
              </Badge>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4">
            <div>
              <span className="font-medium">Name:</span> {configuration.name}
            </div>
            <div>
              <span className="font-medium">Created:</span> {new Date(configuration.createdAt).toLocaleDateString()}
            </div>
            <div>
              <span className="font-medium">Last Updated:</span> {new Date(configuration.updatedAt).toLocaleDateString()}
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="space-y-4">
        <div className="flex justify-between items-center">
          <h2 className="text-2xl font-semibold">Sections</h2>
          <Button size="sm">
            <Plus className="h-4 w-4 mr-2" />
            Add Section
          </Button>
        </div>

        {configuration.sections.length === 0 ? (
          <Card>
            <CardContent className="pt-6">
              <p className="text-center text-muted-foreground">
                No sections found for this configuration
              </p>
            </CardContent>
          </Card>
        ) : (
          <div className="grid gap-4">
            {configuration.sections.map((section) => (
              <LayoutSectionCard key={section.id} section={section} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}