import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"

export function TabsSection() {
  const tabsProperties = [
    {
      name: "size",
      type: "select" as const,
      options: ["default", "small"],
      defaultValue: "default",
      label: "Size",
      description: "Size of the tabs",
    },
    {
      name: "variant",
      type: "select" as const,
      options: ["default", "underline", "pills"],
      defaultValue: "default",
      label: "Variant",
      description: "Visual style of the tabs",
    },
    {
      name: "orientation",
      type: "select" as const,
      options: ["horizontal", "vertical"],
      defaultValue: "horizontal",
      label: "Orientation",
      description: "Layout direction of the tabs",
    },
    {
      name: "fullWidth",
      type: "boolean" as const,
      defaultValue: false,
      label: "Full Width",
      description: "Make tabs span full width",
    },
  ]

  const renderTabs = (props: Record<string, any>) => {
    const { size, variant, orientation, fullWidth } = props

    const getTabsListClasses = () => {
      let classes = ""

      if (orientation === "vertical") {
        classes += "flex-col h-auto"
      } else {
        classes += "inline-flex h-10 items-center justify-center"
      }

      if (variant === "default") {
        classes += " rounded-md bg-[var(--background-secondary)] p-1 text-muted-foreground"
      } else if (variant === "underline") {
        classes += " w-full justify-start border-b rounded-none bg-transparent p-0"
      } else if (variant === "pills") {
        classes += " gap-2 bg-transparent"
      }

      if (fullWidth && orientation === "horizontal" && variant === "default") {
        classes += " grid grid-cols-3 w-full"
      }

      if (size === "small") {
        classes = classes.replace("h-10", "h-8")
      }

      return classes
    }

    const getTabsTriggerClasses = () => {
      let classes =
        "inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"

      if (size === "small") {
        classes += " text-xs px-2 py-1"
      } else {
        classes += " text-sm px-3 py-1.5"
      }

      if (variant === "default") {
        // Revert to default shadcn styling
      } else if (variant === "underline") {
        if (size === "small") {
          classes +=
            " h-8 px-3 pb-1 pt-2 rounded-none border-b-2 border-b-transparent bg-transparent text-muted-foreground shadow-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
        } else {
          classes +=
            " h-9 px-4 pb-2 pt-2 rounded-none border-b-2 border-b-transparent bg-transparent text-muted-foreground shadow-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
        }
      } else if (variant === "pills") {
        if (size === "small") {
          classes +=
            " h-6 rounded-full px-3 bg-[var(--background-secondary)] data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
        } else {
          classes +=
            " h-9 rounded-full px-4 bg-[var(--background-secondary)] data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
        }
      }

      if (orientation === "vertical") {
        classes += " justify-start w-full"
      }

      return classes
    }

    const containerClasses = orientation === "vertical" ? "flex gap-4" : "w-full"

    return (
      <Tabs defaultValue="tab1" className={containerClasses}>
        <TabsList className={getTabsListClasses()}>
          <TabsTrigger value="tab1" className={getTabsTriggerClasses()}>
            {size === "small" ? "Tab 1" : "Dashboard"}
          </TabsTrigger>
          <TabsTrigger value="tab2" className={getTabsTriggerClasses()}>
            {size === "small" ? "Tab 2" : "Analytics"}
          </TabsTrigger>
          <TabsTrigger value="tab3" className={getTabsTriggerClasses()}>
            {size === "small" ? "Tab 3" : "Reports"}
          </TabsTrigger>
        </TabsList>
        <div className={orientation === "vertical" ? "flex-1" : ""}>
          <TabsContent value="tab1">
            <div className="p-4 border rounded-md mt-2">
              {size === "small" ? "Content 1" : "Dashboard content goes here."}
            </div>
          </TabsContent>
          <TabsContent value="tab2">
            <div className="p-4 border rounded-md mt-2">
              {size === "small" ? "Content 2" : "Analytics content goes here."}
            </div>
          </TabsContent>
          <TabsContent value="tab3">
            <div className="p-4 border rounded-md mt-2">
              {size === "small" ? "Content 3" : "Reports content goes here."}
            </div>
          </TabsContent>
        </div>
      </Tabs>
    )
  }

  const generateCode = (props: Record<string, any>) => {
    const { size, variant, orientation, fullWidth } = props

    const getTabsListClasses = () => {
      let classes = ""

      if (orientation === "vertical") {
        classes += "flex-col h-auto"
      } else {
        classes += "inline-flex h-10 items-center justify-center"
      }

      if (variant === "default") {
        classes += " rounded-md bg-[var(--background-secondary)] p-1 text-muted-foreground"
      } else if (variant === "underline") {
        classes += " w-full justify-start border-b rounded-none bg-transparent p-0"
      } else if (variant === "pills") {
        classes += " gap-2 bg-transparent"
      }

      if (fullWidth && orientation === "horizontal" && variant === "default") {
        classes += " grid grid-cols-3 w-full"
      }

      if (size === "small") {
        classes = classes.replace("h-10", "h-8")
      }

      return classes
    }

    const getTabsTriggerClasses = () => {
      let classes =
        "inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"

      if (size === "small") {
        classes += " text-xs px-2 py-1"
      } else {
        classes += " text-sm px-3 py-1.5"
      }

      if (variant === "default") {
        // Revert to default shadcn styling
      } else if (variant === "underline") {
        if (size === "small") {
          classes +=
            " h-8 px-3 pb-1 pt-2 rounded-none border-b-2 border-b-transparent bg-transparent text-muted-foreground shadow-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
        } else {
          classes +=
            " h-9 px-4 pb-2 pt-2 rounded-none border-b-2 border-b-transparent bg-transparent text-muted-foreground shadow-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
        }
      } else if (variant === "pills") {
        if (size === "small") {
          classes +=
            " h-6 rounded-full px-3 bg-[var(--background-secondary)] data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
        } else {
          classes +=
            " h-9 rounded-full px-4 bg-[var(--background-secondary)] data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
        }
      }

      if (orientation === "vertical") {
        classes += " justify-start w-full"
      }

      return classes
    }

    const containerClasses = orientation === "vertical" ? "flex gap-4" : "w-full"
    const tabsListClasses = getTabsListClasses()
    const tabsTriggerClasses = getTabsTriggerClasses()

    return `<Tabs defaultValue="tab1" className="${containerClasses}">
  <TabsList className="${tabsListClasses}">
    <TabsTrigger value="tab1" className="${tabsTriggerClasses}">
      ${size === "small" ? "Tab 1" : "Dashboard"}
    </TabsTrigger>
    <TabsTrigger value="tab2" className="${tabsTriggerClasses}">
      ${size === "small" ? "Tab 2" : "Analytics"}
    </TabsTrigger>
    <TabsTrigger value="tab3" className="${tabsTriggerClasses}">
      ${size === "small" ? "Tab 3" : "Reports"}
    </TabsTrigger>
  </TabsList>
  ${orientation === "vertical" ? '<div className="flex-1">' : ""}
    <TabsContent value="tab1">
      <div className="p-4 border rounded-md mt-2">
        ${size === "small" ? "Content 1" : "Dashboard content goes here."}
      </div>
    </TabsContent>
    <TabsContent value="tab2">
      <div className="p-4 border rounded-md mt-2">
        ${size === "small" ? "Content 2" : "Analytics content goes here."}
      </div>
    </TabsContent>
    <TabsContent value="tab3">
      <div className="p-4 border rounded-md mt-2">
        ${size === "small" ? "Content 3" : "Reports content goes here."}
      </div>
    </TabsContent>
  ${orientation === "vertical" ? "</div>" : ""}
</Tabs>`
  }

  return (
    <section id="tabs" className="mb-12">
      <SectionHeading title="Tabs" description="Switch between different views." />

      <ComponentContainer
        title="Interactive Tabs"
        description="Customize the tabs component with different sizes, variants, and orientations."
        properties={tabsProperties}
        renderComponent={renderTabs}
        generateCode={generateCode}
      />

      <ComponentContainer
        title="Default Tabs"
        description="Standard horizontal tabs with content panels."
        code={`<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <div className="p-4 border rounded-md mt-2">Account settings content goes here.</div>
  </TabsContent>
  <TabsContent value="password">
    <div className="p-4 border rounded-md mt-2">Password settings content goes here.</div>
  </TabsContent>
  <TabsContent value="settings">
    <div className="p-4 border rounded-md mt-2">Other settings content goes here.</div>
  </TabsContent>
</Tabs>`}
      >
        <Tabs defaultValue="account">
          <TabsList>
            <TabsTrigger value="account">Account</TabsTrigger>
            <TabsTrigger value="password">Password</TabsTrigger>
            <TabsTrigger value="settings">Settings</TabsTrigger>
          </TabsList>
          <TabsContent value="account">
            <div className="p-4 border rounded-md mt-2">Account settings content goes here.</div>
          </TabsContent>
          <TabsContent value="password">
            <div className="p-4 border rounded-md mt-2">Password settings content goes here.</div>
          </TabsContent>
          <TabsContent value="settings">
            <div className="p-4 border rounded-md mt-2">Other settings content goes here.</div>
          </TabsContent>
        </Tabs>
      </ComponentContainer>

      <ComponentContainer
        title="Small Tabs"
        description="Compact tabs for space-constrained interfaces."
        code={`<Tabs defaultValue="tab1">
  <TabsList className="inline-flex h-8 items-center justify-center rounded-md bg-[var(--background-secondary)] p-1 text-muted-foreground">
    <TabsTrigger value="tab1" className="inline-flex items-center justify-center whitespace-nowrap text-xs px-2 py-1 h-6 rounded-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[var(--background-primary)] data-[state=active]:text-foreground data-[state=active]:shadow-sm">
      Tab 1
    </TabsTrigger>
    <TabsTrigger value="tab2" className="inline-flex items-center justify-center whitespace-nowrap text-xs px-2 py-1 h-6 rounded-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[var(--background-primary)] data-[state=active]:text-foreground data-[state=active]:shadow-sm">
      Tab 2
    </TabsTrigger>
    <TabsTrigger value="tab3" className="inline-flex items-center justify-center whitespace-nowrap text-xs px-2 py-1 h-6 rounded-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[var(--background-primary)] data-[state=active]:text-foreground data-[state=active]:shadow-sm">
      Tab 3
    </TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    <div className="p-4 border rounded-md mt-2">Content 1</div>
  </TabsContent>
  <TabsContent value="tab2">
    <div className="p-4 border rounded-md mt-2">Content 2</div>
  </TabsContent>
  <TabsContent value="tab3">
    <div className="p-4 border rounded-md mt-2">Content 3</div>
  </TabsContent>
</Tabs>`}
      >
        <Tabs defaultValue="tab1">
          <TabsList className="inline-flex h-8 items-center justify-center rounded-md bg-[var(--background-secondary)] p-1 text-muted-foreground">
            <TabsTrigger
              value="tab1"
              className="inline-flex items-center justify-center whitespace-nowrap text-xs px-2 py-1 h-6 rounded-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[var(--background-primary)] data-[state=active]:text-foreground data-[state=active]:shadow-sm"
            >
              Tab 1
            </TabsTrigger>
            <TabsTrigger
              value="tab2"
              className="inline-flex items-center justify-center whitespace-nowrap text-xs px-2 py-1 h-6 rounded-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[var(--background-primary)] data-[state=active]:text-foreground data-[state=active]:shadow-sm"
            >
              Tab 2
            </TabsTrigger>
            <TabsTrigger
              value="tab3"
              className="inline-flex items-center justify-center whitespace-nowrap text-xs px-2 py-1 h-6 rounded-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[var(--background-primary)] data-[state=active]:text-foreground data-[state=active]:shadow-sm"
            >
              Tab 3
            </TabsTrigger>
          </TabsList>
          <TabsContent value="tab1">
            <div className="p-4 border rounded-md mt-2">Content 1</div>
          </TabsContent>
          <TabsContent value="tab2">
            <div className="p-4 border rounded-md mt-2">Content 2</div>
          </TabsContent>
          <TabsContent value="tab3">
            <div className="p-4 border rounded-md mt-2">Content 3</div>
          </TabsContent>
        </Tabs>
      </ComponentContainer>

      <ComponentContainer
        title="Vertical Tabs"
        description="Tabs arranged vertically for side navigation."
        code={`<Tabs defaultValue="profile" className="flex gap-4">
  <TabsList className="flex-col h-auto">
    <TabsTrigger value="profile" className="justify-start w-full">Profile</TabsTrigger>
    <TabsTrigger value="notifications" className="justify-start w-full">Notifications</TabsTrigger>
    <TabsTrigger value="appearance" className="justify-start w-full">Appearance</TabsTrigger>
  </TabsList>
  <div className="flex-1">
    <TabsContent value="profile">
      <div className="p-4 border rounded-md">Profile settings content goes here.</div>
    </TabsContent>
    <TabsContent value="notifications">
      <div className="p-4 border rounded-md">Notification settings content goes here.</div>
    </TabsContent>
    <TabsContent value="appearance">
      <div className="p-4 border rounded-md">Appearance settings content goes here.</div>
    </TabsContent>
  </div>
</Tabs>`}
      >
        <Tabs defaultValue="profile" className="flex gap-4">
          <TabsList className="flex-col h-auto">
            <TabsTrigger value="profile" className="justify-start w-full">
              Profile
            </TabsTrigger>
            <TabsTrigger value="notifications" className="justify-start w-full">
              Notifications
            </TabsTrigger>
            <TabsTrigger value="appearance" className="justify-start w-full">
              Appearance
            </TabsTrigger>
          </TabsList>
          <div className="flex-1">
            <TabsContent value="profile">
              <div className="p-4 border rounded-md">Profile settings content goes here.</div>
            </TabsContent>
            <TabsContent value="notifications">
              <div className="p-4 border rounded-md">Notification settings content goes here.</div>
            </TabsContent>
            <TabsContent value="appearance">
              <div className="p-4 border rounded-md">Appearance settings content goes here.</div>
            </TabsContent>
          </div>
        </Tabs>
      </ComponentContainer>

      <ComponentContainer
        title="Full Width Tabs"
        description="Tabs that span the full width of the container."
        code={`<Tabs defaultValue="tab1">
  <TabsList className="grid w-full grid-cols-3">
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    <div className="p-4 border rounded-md mt-2">Tab 1 content goes here.</div>
  </TabsContent>
  <TabsContent value="tab2">
    <div className="p-4 border rounded-md mt-2">Tab 2 content goes here.</div>
  </TabsContent>
  <TabsContent value="tab3">
    <div className="p-4 border rounded-md mt-2">Tab 3 content goes here.</div>
  </TabsContent>
</Tabs>`}
      >
        <Tabs defaultValue="tab1">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
            <TabsTrigger value="tab3">Tab 3</TabsTrigger>
          </TabsList>
          <TabsContent value="tab1">
            <div className="p-4 border rounded-md mt-2">Tab 1 content goes here.</div>
          </TabsContent>
          <TabsContent value="tab2">
            <div className="p-4 border rounded-md mt-2">Tab 2 content goes here.</div>
          </TabsContent>
          <TabsContent value="tab3">
            <div className="p-4 border rounded-md mt-2">Tab 3 content goes here.</div>
          </TabsContent>
        </Tabs>
      </ComponentContainer>

      <ComponentContainer
        title="Underlined Tabs"
        description="Tabs with an underline style instead of a background."
        code={`<Tabs defaultValue="tab1" className="w-full">
  <TabsList className="w-full justify-start border-b rounded-none bg-transparent p-0">
    <TabsTrigger 
      value="tab1" 
      className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-2 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
    >
      Dashboard
    </TabsTrigger>
    <TabsTrigger 
      value="tab2" 
      className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-2 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
    >
      Analytics
    </TabsTrigger>
    <TabsTrigger 
      value="tab3" 
      className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-2 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
    >
      Reports
    </TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    <div className="p-4 border-x border-b rounded-b-md">Dashboard content goes here.</div>
  </TabsContent>
  <TabsContent value="tab2">
    <div className="p-4 border-x border-b rounded-b-md">Analytics content goes here.</div>
  </TabsContent>
  <TabsContent value="tab3">
    <div className="p-4 border-x border-b rounded-b-md">Reports content goes here.</div>
  </TabsContent>
</Tabs>`}
      >
        <Tabs defaultValue="tab1" className="w-full">
          <TabsList className="w-full justify-start border-b rounded-none bg-transparent p-0">
            <TabsTrigger
              value="tab1"
              className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-2 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
            >
              Dashboard
            </TabsTrigger>
            <TabsTrigger
              value="tab2"
              className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-2 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
            >
              Analytics
            </TabsTrigger>
            <TabsTrigger
              value="tab3"
              className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-2 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
            >
              Reports
            </TabsTrigger>
          </TabsList>
          <TabsContent value="tab1">
            <div className="p-4 border-x border-b rounded-b-md">Dashboard content goes here.</div>
          </TabsContent>
          <TabsContent value="tab2">
            <div className="p-4 border-x border-b rounded-b-md">Analytics content goes here.</div>
          </TabsContent>
          <TabsContent value="tab3">
            <div className="p-4 border-x border-b rounded-b-md">Reports content goes here.</div>
          </TabsContent>
        </Tabs>
      </ComponentContainer>
    </section>
  )
}