'use client';

import { useState } from 'react';
import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { ColumnDef } from '@tanstack/react-table';
import {
  MoreHorizontal,
  Building2,
  Edit,
  Trash2,
  Users,
  Plus,
} from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { DataTable, DataTableColumnHeader } from '@/components/ui/data-table';
import type { Department } from '@/types';

interface DepartmentsContentProps {
  locale: string;
}

// Extended department type for display
interface DepartmentWithStats extends Department {
  employeeCount: number;
  managerName?: string;
  location?: string;
}

// Mock department data
const mockDepartments: DepartmentWithStats[] = [
  {
    id: '1',
    name: 'IT & Entwicklung',
    description: 'Software-Entwicklung und IT-Infrastruktur',
    employeeCount: 24,
    managerName: 'Peter Mueller',
    location: 'Hauptsitz',
  },
  {
    id: '2',
    name: 'Personal',
    description: 'Personalwesen und Recruiting',
    employeeCount: 8,
    managerName: 'Anna Schmidt',
    location: 'Hauptsitz',
  },
  {
    id: '3',
    name: 'Vertrieb',
    description: 'Vertrieb und Kundenbetreuung',
    employeeCount: 32,
    managerName: 'Thomas Weber',
    location: 'Niederlassung Sued',
  },
  {
    id: '4',
    name: 'Marketing',
    description: 'Marketing und Kommunikation',
    employeeCount: 12,
    location: 'Hauptsitz',
  },
  {
    id: '5',
    name: 'Lager & Logistik',
    description: 'Lagerverwaltung und Versand',
    employeeCount: 45,
    managerName: 'Klaus Fischer',
    location: 'Lager Nord',
  },
  {
    id: '6',
    name: 'Finanzen',
    description: 'Buchhaltung und Controlling',
    employeeCount: 6,
    managerName: 'Maria Braun',
    location: 'Hauptsitz',
  },
];

/**
 * Departments management content with DataTable
 */
export function DepartmentsContent({ locale }: DepartmentsContentProps) {
  const t = useTranslations('admin');
  const [departments] = useState<DepartmentWithStats[]>(mockDepartments);

  const columns: ColumnDef<DepartmentWithStats>[] = [
    {
      accessorKey: 'name',
      header: ({ column }) => <DataTableColumnHeader column={column} title="Abteilung" />,
      cell: ({ row }) => {
        const dept = row.original;
        return (
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
              <Building2 className="h-5 w-5 text-primary" />
            </div>
            <div>
              <p className="font-medium">{dept.name}</p>
              {dept.description && (
                <p className="text-xs text-muted-foreground max-w-[300px] truncate">
                  {dept.description}
                </p>
              )}
            </div>
          </div>
        );
      },
    },
    {
      accessorKey: 'managerName',
      header: ({ column }) => <DataTableColumnHeader column={column} title="Leitung" />,
      cell: ({ row }) => {
        const manager = row.original.managerName;
        return manager ? (
          <span>{manager}</span>
        ) : (
          <Badge variant="outline" className="text-muted-foreground">
            Nicht zugewiesen
          </Badge>
        );
      },
    },
    {
      accessorKey: 'employeeCount',
      header: ({ column }) => <DataTableColumnHeader column={column} title="Mitarbeiter" />,
      cell: ({ row }) => (
        <div className="flex items-center gap-2">
          <Users className="h-4 w-4 text-muted-foreground" />
          <span>{row.original.employeeCount}</span>
        </div>
      ),
    },
    {
      accessorKey: 'location',
      header: ({ column }) => <DataTableColumnHeader column={column} title="Standort" />,
      cell: ({ row }) => (
        <Badge variant="secondary">{row.original.location || 'Nicht zugewiesen'}</Badge>
      ),
    },
    {
      id: 'actions',
      enableHiding: false,
      cell: ({ row }) => {
        const dept = row.original;

        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="h-8 w-8">
                <MoreHorizontal className="h-4 w-4" />
                <span className="sr-only">Aktionen oeffnen</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuLabel>Aktionen</DropdownMenuLabel>
              <DropdownMenuItem>
                <Edit className="mr-2 h-4 w-4" />
                Bearbeiten
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Users className="mr-2 h-4 w-4" />
                Mitarbeiter verwalten
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem className="text-destructive">
                <Trash2 className="mr-2 h-4 w-4" />
                Loeschen
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        );
      },
    },
  ];

  const totalEmployees = departments.reduce((sum, d) => sum + d.employeeCount, 0);

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.3 }}
      className="space-y-4"
    >
      {/* Actions Bar */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold">Abteilungsverwaltung</h2>
          <p className="text-sm text-muted-foreground">
            {departments.length} Abteilungen mit {totalEmployees} Mitarbeitern
          </p>
        </div>

        <Button className="gap-2">
          <Plus className="h-4 w-4" />
          Abteilung erstellen
        </Button>
      </div>

      {/* Data Table */}
      <DataTable
        columns={columns}
        data={departments}
        searchColumn="name"
        searchPlaceholder="Abteilung suchen..."
      />
    </motion.div>
  );
}
