"use client"

import { useState } from "react"
import LeaveRequestList from "@/features/leave/components/LeaveRequestList"
import Calendar, { type PublicHoliday } from "@/features/leave/components/Calendar"

type LeaveRequest = {
  id: string
  employeeName: string
  leaveTypeName: string
  startDate: string
  endDate: string
  duration: number
  status: "pending" | "approved" | "rejected"
  createdAt: string
  branchName?: string | null
  departmentName?: string | null
  approvalTotal?: number
  approvalApproved?: number
  approvalRejected?: number
  approvalPending?: number
  myApprovalStatus?: "pending" | "approved" | "rejected" | null
  approvals?: {
    approverName: string
    role: string
    status: "pending" | "approved" | "rejected"
    reason?: string | null
  }[]
}

type Branch = { id: string; name: string }

interface LeaveTabViewProps {
  requests: LeaveRequest[]
  holidays: PublicHoliday[]
  branches?: Branch[]
  canManage?: boolean
  canProcessLeave?: boolean
}

type Tab = "list" | "calendar"

export default function LeaveTabView({
  requests,
  holidays,
  branches = [],
  canManage = true,
  canProcessLeave = false,
}: LeaveTabViewProps) {
  const [activeTab, setActiveTab] = useState<Tab>("list")

  return (
    <div className="space-y-4">
      {/* Tab Bar */}
      <div className="inline-flex items-center rounded-lg border border-border bg-muted p-1 gap-1">
        <button
          onClick={() => setActiveTab("list")}
          className={`inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-all duration-150 ${
            activeTab === "list"
              ? "bg-background text-foreground shadow-sm"
              : "text-muted-foreground hover:text-foreground"
          }`}
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" />
            <line x1="3" y1="6" x2="3.01" y2="6" /><line x1="3" y1="12" x2="3.01" y2="12" /><line x1="3" y1="18" x2="3.01" y2="18" />
          </svg>
          Requests
        </button>
        <button
          onClick={() => setActiveTab("calendar")}
          className={`inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-all duration-150 ${
            activeTab === "calendar"
              ? "bg-background text-foreground shadow-sm"
              : "text-muted-foreground hover:text-foreground"
          }`}
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" />
          </svg>
          Calendar
        </button>
      </div>

      {/* Tab Content */}
      <div>
        {activeTab === "list" ? (
          <LeaveRequestList
            requests={requests}
            branches={branches}
            canProcessLeave={canProcessLeave}
          />
        ) : (
          <Calendar holidays={holidays} canManage={canManage} />
        )}
      </div>
    </div>
  )
}