"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { LayoutSectionCard } from "./LayoutSectionCard";
import { AddSectionDialog } from "./AddSectionDialog";
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: Date;
  updatedAt: Date;
}

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

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

interface LayoutConfigurationDetailProps {
  configuration: LayoutConfiguration;
}

export function LayoutConfigurationDetail({ configuration }: LayoutConfigurationDetailProps) {
  const router = useRouter();
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [sections, setSections] = useState(configuration.sections);

  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">
                {sections.length} sections
              </Badge>
              <Badge variant="outline">
                {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" onClick={() => setIsDialogOpen(true)}>
            <Plus className="h-4 w-4 mr-2" />
            Add Section
          </Button>
        </div>

        {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">
            {sections.map((section) => (
              <LayoutSectionCard
                key={section.id}
                section={section}
                onSectionDeleted={() => {
                  // Refresh the sections list
                  setSections(prev => prev.filter(s => s.id !== section.id));
                }}
              />
            ))}
          </div>
        )}
      </div>

      <AddSectionDialog
        configurationId={configuration.id}
        open={isDialogOpen}
        onOpenChange={setIsDialogOpen}
      />
    </div>
  );
}