"use client";

import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { MoreVertical, Trash2 } from "lucide-react";
import { DeleteSectionDialog } from "./DeleteSectionDialog";

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 LayoutSectionCardProps {
  section: LayoutSection;
  onSectionDeleted?: () => void;
}

export function LayoutSectionCard({ section, onSectionDeleted }: LayoutSectionCardProps) {
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  
  const getTypeColor = (type: string) => {
    switch (type.toLowerCase()) {
      case "properties":
        return "bg-blue-100 text-blue-800";
      case "grid":
        return "bg-green-100 text-green-800";
      default:
        return "bg-gray-100 text-gray-800";
    }
  };

  const handleCardClick = (e: React.MouseEvent) => {
    // Prevent navigation when clicking on the dropdown menu
    if ((e.target as HTMLElement).closest('.section-actions')) {
      return;
    }
    window.location.href = `/layout-configurations/sections/${section.id}/fields`;
  };

  return (
    <>
      <Card
        className="cursor-pointer hover:shadow-lg transition-shadow relative"
        onClick={handleCardClick}
      >
        <CardHeader>
          <div className="flex justify-between items-start">
            <div>
              <CardTitle className="text-lg">{section.name}</CardTitle>
              <CardDescription>
                Sheet: {section.sheetName} | Table: {section.tableName}
              </CardDescription>
            </div>
            <div className="section-actions flex items-center gap-2">
              <Badge className={getTypeColor(section.type)}>
                {section.type}
              </Badge>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 w-8 p-0"
                    onClick={(e) => e.stopPropagation()}
                  >
                    <MoreVertical className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem
                    className="text-destructive"
                    onClick={(e) => {
                      e.stopPropagation();
                      setDeleteDialogOpen(true);
                    }}
                  >
                    <Trash2 className="mr-2 h-4 w-4" />
                    Delete
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex gap-4 text-sm">
              {section.startingRow && (
                <span>
                  <strong>Rows:</strong> {section.startingRow} - {section.endingRow || "end"}
                </span>
              )}
              <span>
                <strong>Fields:</strong> {section.fields.length}
              </span>
            </div>

            {section.fields.length > 0 && (
              <div>
                <h4 className="font-medium mb-2">Fields</h4>
                <div className="overflow-x-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Name</TableHead>
                        <TableHead>Type</TableHead>
                        <TableHead>Position</TableHead>
                        <TableHead>Column</TableHead>
                        <TableHead>Order</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {section.fields.map((field) => (
                        <TableRow key={field.id}>
                          <TableCell className="font-medium">{field.name}</TableCell>
                          <TableCell>
                            <Badge variant="outline" className="text-xs">
                              {field.dataType}
                            </Badge>
                          </TableCell>
                          <TableCell>{field.cellPosition}</TableCell>
                          <TableCell>{field.importTableColumnName}</TableCell>
                          <TableCell>{field.importColumnOrderNumber}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      <DeleteSectionDialog
        open={deleteDialogOpen}
        onOpenChange={setDeleteDialogOpen}
        section={{ id: section.id, name: section.name }}
        onSuccess={onSectionDeleted}
      />
    </>
  );
}