'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { FileStack, FolderTree, Layers, BookOpen, FileBox } from 'lucide-react';
import Link from 'next/link';

const contractDrawingMenu = [
  {
    title: 'Volumes',
    description: 'Manage contract drawing volumes (เล่ม)',
    href: '/admin/drawings/contract/volumes',
    icon: BookOpen,
  },
  {
    title: 'Categories',
    description: 'Manage main categories (หมวดหมู่หลัก)',
    href: '/admin/drawings/contract/categories',
    icon: FolderTree,
  },
  {
    title: 'Sub-categories',
    description: 'Manage sub-categories (หมวดหมู่ย่อย)',
    href: '/admin/drawings/contract/sub-categories',
    icon: Layers,
  },
];

const shopDrawingMenu = [
  {
    title: 'Main Categories',
    description: 'Manage main categories (หมวดหมู่หลัก)',
    href: '/admin/drawings/shop/main-categories',
    icon: FolderTree,
  },
  {
    title: 'Sub-categories',
    description: 'Manage sub-categories (หมวดหมู่ย่อย)',
    href: '/admin/drawings/shop/sub-categories',
    icon: Layers,
  },
];

export default function DrawingsAdminPage() {
  return (
    <div className="p-6 space-y-8">
      <div>
        <h1 className="text-2xl font-bold">Drawing Master Data</h1>
        <p className="text-muted-foreground mt-1">Manage categories and volumes for Contract and Shop Drawings</p>
      </div>

      {/* Contract Drawings Section */}
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <FileStack className="h-5 w-5 text-blue-600" />
          <h2 className="text-lg font-semibold">Contract Drawings</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {contractDrawingMenu.map((item) => (
            <Link key={item.href} href={item.href}>
              <Card className="hover:shadow-md transition-shadow cursor-pointer h-full border-blue-200 hover:border-blue-400">
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">{item.title}</CardTitle>
                  <item.icon className="h-4 w-4 text-blue-600" />
                </CardHeader>
                <CardContent>
                  <p className="text-xs text-muted-foreground">{item.description}</p>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      </div>

      {/* Shop Drawings Section */}
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <FileBox className="h-5 w-5 text-green-600" />
          <h2 className="text-lg font-semibold">Shop Drawings / As Built</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {shopDrawingMenu.map((item) => (
            <Link key={item.href} href={item.href}>
              <Card className="hover:shadow-md transition-shadow cursor-pointer h-full border-green-200 hover:border-green-400">
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">{item.title}</CardTitle>
                  <item.icon className="h-4 w-4 text-green-600" />
                </CardHeader>
                <CardContent>
                  <p className="text-xs text-muted-foreground">{item.description}</p>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}