"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { FileIcon as FileTemplate, Plus, Copy, Edit, Trash2 } from "lucide-react"

interface ScheduleTemplatesProps {
  teamId: string
  teamName: string
}

// Sample template data
const getTemplates = (teamId: string) => [
  {
    id: "1",
    name: "Standard Week",
    description: "Regular 5-day work week with weekend coverage",
    shifts: ["08:00-16:00", "16:00-00:00", "00:00-08:00"],
    employees: 8,
    coverage: "24/7",
  },
  {
    id: "2",
    name: "Holiday Schedule",
    description: "Reduced staffing for holidays and special events",
    shifts: ["08:00-20:00", "20:00-08:00"],
    employees: 4,
    coverage: "24/7",
  },
  {
    id: "3",
    name: "Maintenance Week",
    description: "Extended maintenance periods with adjusted shifts",
    shifts: ["06:00-14:00", "14:00-22:00", "22:00-06:00"],
    employees: 6,
    coverage: "24/7",
  },
  {
    id: "4",
    name: "Emergency Response",
    description: "Emergency staffing template for critical situations",
    shifts: ["12-hour rotating"],
    employees: 12,
    coverage: "24/7",
  },
]

export function ScheduleTemplates({ teamId, teamName }: ScheduleTemplatesProps) {
  const templates = getTemplates(teamId)

  return (
    <Card className="w-full">
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">
              <FileTemplate className="size-5" />
              {teamName} - Schedule Templates
            </CardTitle>
            <CardDescription>Pre-configured schedule templates for quick deployment</CardDescription>
          </div>
          <Button>
            <Plus className="size-4 mr-2" />
            Create Template
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4 md:grid-cols-2">
          {templates.map((template) => (
            <Card key={template.id} className="border-2 hover:border-primary/50 transition-colors">
              <CardHeader className="pb-3">
                <div className="flex items-start justify-between">
                  <div>
                    <CardTitle className="text-lg">{template.name}</CardTitle>
                    <CardDescription className="mt-1">{template.description}</CardDescription>
                  </div>
                  <Badge variant="outline">{template.coverage}</Badge>
                </div>
              </CardHeader>
              <CardContent className="pt-0">
                <div className="space-y-3">
                  <div>
                    <p className="text-sm font-medium text-gray-700 mb-2">Shift Patterns:</p>
                    <div className="flex flex-wrap gap-1">
                      {template.shifts.map((shift, index) => (
                        <Badge key={index} variant="secondary" className="text-xs">
                          {shift}
                        </Badge>
                      ))}
                    </div>
                  </div>

                  <div className="flex items-center justify-between text-sm text-gray-600">
                    <span>{template.employees} employees</span>
                  </div>

                  <div className="flex items-center gap-2 pt-2">
                    <Button size="sm" className="flex-1">
                      <Copy className="size-4 mr-1" />
                      Use Template
                    </Button>
                    <Button variant="outline" size="sm">
                      <Edit className="size-4" />
                    </Button>
                    <Button variant="outline" size="sm">
                      <Trash2 className="size-4" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        {templates.length === 0 && (
          <div className="text-center py-8">
            <FileTemplate className="size-12 mx-auto mb-4 text-gray-400" />
            <h3 className="text-lg font-medium text-gray-900 mb-2">No templates found</h3>
            <p className="text-gray-500 mb-4">Create your first schedule template to get started</p>
            <Button>
              <Plus className="size-4 mr-2" />
              Create Template
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  )
}