// app/solutions/[industry]/page.tsx

'use client';

import * as React from 'react';
import { notFound } from 'next/navigation';
import { MoveUpRightIcon, DownloadIcon } 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 industries and their specific details
// In a real app, this would likely come from a CMS or database
const INDUSTRY_DATA: Record<string, any> = {
  technology: {
    name: "Technology",
    title: "Cloud Alternatives for Technology Companies",
    description: "From SaaS startups to enterprise software, we help you scale efficiently without the cloud tax.",
    painPoints: [
      "High and unpredictable cloud bills that scale with user growth.",
      "Vendor lock-in making it hard to switch providers or adopt hybrid models.",
      "Complexity and overhead of managing cloud-native architectures.",
      "Need for high performance and low latency for user-facing applications."
    ],
    proposedStack: [
      {
        icon: <PlaceholderIcon className="size-5" />,
        title: "Kubernetes (K3s/RKE2)",
        description: "Lightweight, certified Kubernetes for efficient container orchestration."
      },
      {
        icon: <PlaceholderIcon className="size-5" />,
        title: "PostgreSQL/MySQL",
        description: "Self-hosted, high-availability databases with point-in-time recovery."
      },
      {
        icon: <PlaceholderIcon className="size-5" />,
        title: "MinIO",
        description: "S3-compatible object storage for unstructured data."
      },
      {
        icon: <PlaceholderIcon className="size-5" />,
        title: "Nextcloud",
        description: "Private file sync, sharing, and collaboration platform."
      }
    ],
    migrationPlan: [
      "Audit current cloud spend and architecture.",
      "Design a colocated Kubernetes cluster tailored to your workloads.",
      "Migrate stateful services with zero downtime using blue-green deployments.",
      "Implement CI/CD pipelines for automated testing and deployment.",
      "Optimize for cost and performance post-migration."
    ],
    opsModel: "We provide 24/7 monitoring, managed upgrades, and direct access to our SREs. You retain control over application configuration and scaling decisions.",
    outcomes: [
      {
        metric: "60%",
        description: "Reduction in monthly infrastructure costs."
      },
      {
        metric: "Sub-10ms",
        description: "Improved database query latency."
      },
      {
        metric: "Zero",
        description: "Vendor lock-in with portable, open-source tools."
      }
    ]
  },
  legal: {
    name: "Legal",
    title: "Secure Infrastructure for Legal Firms",
    description: "Secure, private document management and collaboration environments with strict access controls.",
    painPoints: [
      "Stringent data privacy regulations (GDPR, CCPA) requiring data residency and control.",
      "High cost of secure cloud storage and collaboration tools.",
      "Risk of data breaches from third-party SaaS providers.",
      "Need for comprehensive audit trails and access logging."
    ],
    proposedStack: [
      {
        icon: <PlaceholderIcon className="size-5" />,
        title: "Nextcloud",
        description: "Enterprise-grade file sync, sharing, and collaboration with full audit capabilities."
      },
      {
        icon: <PlaceholderIcon className="size-5" />,
        title: "OnlyOffice",
        description: "Private, self-hosted office suite for document editing and collaboration."
      },
      {
        icon: <PlaceholderIcon className="size-5" />,
        title: "Keycloak",
        description: "Centralized identity management with SAML/OIDC integration for existing directories."
      },
      {
        icon: <PlaceholderIcon className="size-5" />,
        title: "OpenSearch",
        description: "Self-hosted search and analytics engine for document discovery."
      }
    ],
    migrationPlan: [
      "Inventory and classify all documents and data flows.",
      "Implement a secure, private Nextcloud instance with custom compliance policies.",
      "Migrate existing document repositories with full version history.",
      "Integrate with existing case management and time-tracking systems.",
      "Train staff on new tools and security protocols."
    ],
    opsModel: "We manage the underlying infrastructure, security patches, and backups. Your team manages user accounts, permissions, and document workflows.",
    outcomes: [
      {
        metric: "100%",
        description: "Data sovereignty and compliance with legal regulations."
      },
      {
        metric: "$50k/year",
        description: "Savings vs. proprietary legal tech SaaS bundles."
      },
      {
        metric: "Zero",
        description: "Third-party access to sensitive client data."
      }
    ]
  },
  // Add more industries here...
};

interface SolutionPageProps {
  params: { industry: string };
}

export default function SolutionPage({ params }: SolutionPageProps) {
  const { industry } = params;
  const solution = INDUSTRY_DATA[industry];

  if (!solution) {
    notFound();
  }

  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />
      <Section className="flex-grow">
        <Container>
          <div className="mb-8">
            <Button variant="link" asChild className="px-0">
              <a href="/solutions">&larr; All Solutions</a>
            </Button>
          </div>
          
          <div className="text-center mb-12">
            <h1 className="text-3xl md:text-4xl font-bold">{solution.title}</h1>
            <p className="mt-4 text-muted-foreground max-w-2xl mx-auto">
              {solution.description}
            </p>
          </div>
          
          <Section>
            <Container>
              <h2 className="text-2xl font-bold mb-6">Key Pain Points</h2>
              <ul className="space-y-2">
                {solution.painPoints.map((point: string, index: number) => (
                  <li key={index} className="flex items-start">
                    <span className="mr-2 text-primary">•</span>
                    <span>{point}</span>
                  </li>
                ))}
              </ul>
            </Container>
          </Section>
          
          <Section background="muted">
            <Container>
              <h2 className="text-2xl font-bold mb-6">Proposed Stack</h2>
              <FeatureGrid features={solution.proposedStack} columns={{ initial: 1, sm: 2 }} />
            </Container>
          </Section>
          
          <Section>
            <Container>
              <h2 className="text-2xl font-bold mb-6">Migration Plan</h2>
              <ol className="space-y-4">
                {solution.migrationPlan.map((step: string, index: number) => (
                  <li key={index} className="flex items-start">
                    <span className="mr-3 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold">
                      {index + 1}
                    </span>
                    <span>{step}</span>
                  </li>
                ))}
              </ol>
            </Container>
          </Section>
          
          <Section background="muted">
            <Container>
              <h2 className="text-2xl font-bold mb-6">Operations Model</h2>
              <p className="text-muted-foreground">
                {solution.opsModel}
              </p>
            </Container>
          </Section>
          
          <Section>
            <Container>
              <h2 className="text-2xl font-bold mb-6">Expected Outcomes</h2>
              <Grid columns={{ initial: 1, sm: 3 }} gap="6">
                {solution.outcomes.map((outcome: { metric: string; description: string }, index: number) => (
                  <Card key={index}>
                    <CardHeader>
                      <CardTitle className="text-3xl font-bold">{outcome.metric}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <CardDescription>{outcome.description}</CardDescription>
                    </CardContent>
                  </Card>
                ))}
              </Grid>
            </Container>
          </Section>
          
          <Section background="muted" className="text-center">
            <Container>
              <h2 className="text-2xl font-bold mb-4">Ready to transform your infrastructure?</h2>
              <p className="mb-6 text-muted-foreground max-w-2xl mx-auto">
                Download our industry-specific blueprint or book a free architecture call.
              </p>
              <div className="flex flex-col sm:flex-row gap-3 justify-center">
                <Button asChild>
                  <a href={`/download-blueprint/${industry}`}>
                    <DownloadIcon className="mr-2 size-4" />
                    Download Blueprint
                  </a>
                </Button>
                <Button asChild variant="outline">
                  <a href="/contact">
                    Book Architecture Call
                    <MoveUpRightIcon className="ml-2 size-4" />
                  </a>
                </Button>
              </div>
            </Container>
          </Section>
        </Container>
      </Section>
      <Footer />
    </div>
  );
}