// app/stack/page.tsx

'use client';

import * as React from 'react';
import { ExternalLinkIcon } from 'lucide-react';

import { Navbar } from '@workspace/ui/components/layout';
import { Footer } from '@workspace/ui/components/layout';
import { Container, Section, Grid } from '@workspace/ui/components/layout';
import { FeatureGrid } from '@workspace/ui/components/content';
import { Callout } from '@workspace/ui/components/content';
import { Badge } from '@workspace/ui/components/content';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@workspace/ui/components/ui';
import { Button } from '@workspace/ui/components/ui';
import { PlaceholderIcon } from '@workspace/ui/components/icons'; // Using placeholder for now

// Mock data for Core Frameworks
const CORE_FRAMEWORKS = [
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Nextcloud",
    description: "Your self-hosted productivity platform. Files, collaboration, office suite, and more."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Seafile",
    description: "High-performance file sync and sharing with robust access controls."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "n8n",
    description: "Workflow automation. Connect your tools and data with low-code automation."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Keycloak",
    description: "Identity and Access Management (IAM). Single Sign-On (SSO) for all your apps."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "PostgreSQL",
    description: "The world's most advanced open-source relational database."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "MinIO",
    description: "High-performance, S3-compatible object storage."
  }
];

// Mock data for AI-Native Stack
const AI_NATIVE_STACK = [
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Local LLM Inference",
    description: "Run large language models on your own hardware for complete privacy."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "RAG Engine",
    description: "Retrieval-Augmented Generation over your private data collections."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Vector DB",
    description: "Store and query embeddings for semantic search and AI applications."
  }
];

// Mock data for Integrations
const INTEGRATIONS = [
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "SSO (SAML, OIDC)",
    description: "Seamless single sign-on with existing identity providers."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "LDAP",
    description: "Integrate with existing directory services for user management."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Jira",
    description: "Link issues, automate workflows, and sync data with Jira."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Slack",
    description: "Send notifications, trigger workflows, and collaborate in Slack."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Git",
    description: "Self-host Git repositories and integrate with CI/CD pipelines."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "API Connectors",
    description: "Pre-built connectors for hundreds of SaaS and enterprise APIs."
  }
];

export default function StackPage() {
  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />
      <Section className="flex-grow">
        <Container>
          <div className="text-center mb-12">
            <h1 className="text-3xl md:text-4xl font-bold">Our Stack</h1>
            <p className="mt-4 text-muted-foreground max-w-2xl mx-auto">
              We build on proven, open-source foundations. No vendor lock-in, no proprietary black boxes.
            </p>
          </div>
          
          <Section>
            <Container>
              <h2 className="text-2xl font-bold mb-6">Core Frameworks</h2>
              <FeatureGrid features={CORE_FRAMEWORKS} columns={{ initial: 1, sm: 2, md: 3 }} />
            </Container>
          </Section>
          
          <Section background="muted">
            <Container>
              <div className="flex flex-wrap items-center justify-between gap-4 mb-6">
                <h2 className="text-2xl font-bold">AI-Native</h2>
                <Badge variant="info">Private & Secure</Badge>
              </div>
              <p className="mb-6 text-muted-foreground max-w-3xl">
                Leverage AI on your terms. All inference happens on hardware you control, over data you own. Zero leakage to third parties.
              </p>
              <FeatureGrid features={AI_NATIVE_STACK} columns={{ initial: 1, md: 3 }} />
              
              <Callout variant="info" className="mt-8">
                <span className="font-semibold">AI Compliance:</span> Our local AI stack ensures strict adherence to data privacy regulations (GDPR, HIPAA) and eliminates risks associated with sending sensitive data to external LLM providers.
              </Callout>
            </Container>
          </Section>
          
          <Section>
            <Container>
              <h2 className="text-2xl font-bold mb-6">Integrations</h2>
              <p className="mb-6 text-muted-foreground max-w-3xl">
                We wire your new stack into your existing ecosystem. Connect to SSO, directories, project management, communication tools, and more.
              </p>
              <FeatureGrid features={INTEGRATIONS} columns={{ initial: 1, sm: 2, md: 3 }} />
            </Container>
          </Section>
          
          <Section background="muted" className="text-center">
            <Container>
              <h2 className="text-2xl font-bold mb-4">Want to see a specific tool?</h2>
              <p className="mb-6 text-muted-foreground max-w-2xl mx-auto">
                Our stack is flexible. If you have a specific open-source tool in mind, we can likely integrate it.
              </p>
              <Button asChild>
                <a href="/contact">
                  Discuss Your Stack
                  <ExternalLinkIcon className="ml-2 size-4" />
                </a>
              </Button>
            </Container>
          </Section>
        </Container>
      </Section>
      <Footer />
    </div>
  );
}