import React, { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Copy, Download } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import aiAgencyData from '../data/ai-agency-prompt.json';

const AIAgencyPrompt = () => {
  const { toast } = useToast();
  const [selectedPackage, setSelectedPackage] = useState<string | null>(null);

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
    toast({
      title: "Copied to clipboard",
      description: "The content has been copied to your clipboard.",
    });
  };

  const downloadJSON = () => {
    const dataStr = JSON.stringify(aiAgencyData, null, 2);
    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
    const exportFileDefaultName = 'ai-agency-prompt.json';
    const linkElement = document.createElement('a');
    linkElement.setAttribute('href', dataUri);
    linkElement.setAttribute('download', exportFileDefaultName);
    linkElement.click();
  };

  return (
    <div className="max-w-6xl mx-auto p-6 space-y-6">
      <div className="text-center space-y-4">
        <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
          {aiAgencyData.ai_agency_prompt.meta.title}
        </h1>
        <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
          {aiAgencyData.ai_agency_prompt.meta.description}
        </p>
        <div className="flex justify-center gap-4">
          <Button onClick={downloadJSON} className="flex items-center gap-2">
            <Download className="w-4 h-4" />
            Download JSON
          </Button>
          <Button 
            variant="outline" 
            onClick={() => copyToClipboard(JSON.stringify(aiAgencyData, null, 2))}
            className="flex items-center gap-2"
          >
            <Copy className="w-4 h-4" />
            Copy Full JSON
          </Button>
        </div>
      </div>

      <Tabs defaultValue="services" className="w-full">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="services">Core Services</TabsTrigger>
          <TabsTrigger value="prompts">Prompt Templates</TabsTrigger>
          <TabsTrigger value="packages">Service Packages</TabsTrigger>
          <TabsTrigger value="workflow">Implementation</TabsTrigger>
        </TabsList>

        <TabsContent value="services" className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {Object.entries(aiAgencyData.ai_agency_prompt.core_services).map(([serviceKey, service]) => (
              <Card key={serviceKey} className="h-full">
                <CardHeader>
                  <CardTitle className="capitalize">{serviceKey.replace('_', ' ')}</CardTitle>
                </CardHeader>
                <CardContent>
                  {Object.entries(service as Record<string, any>).map(([subKey, subService]) => (
                    <div key={subKey} className="mb-4">
                      <h4 className="font-semibold mb-2 capitalize">{subKey.replace('_', ' ')}</h4>
                      {typeof subService === 'object' ? (
                        <div className="space-y-2">
                          {Object.entries(subService).map(([itemKey, item]) => (
                            <div key={itemKey} className="text-sm">
                              <Badge variant="outline" className="mb-1 text-xs">
                                {itemKey.replace('_', ' ')}
                              </Badge>
                              <p className="text-muted-foreground">{item as string}</p>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <p className="text-sm text-muted-foreground">{subService}</p>
                      )}
                    </div>
                  ))}
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>

        <TabsContent value="prompts" className="space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {Object.entries(aiAgencyData.ai_agency_prompt.prompt_templates).map(([templateKey, template]) => (
              <Card key={templateKey} className="h-full">
                <CardHeader>
                  <CardTitle className="capitalize">{templateKey.replace('_', ' ')}</CardTitle>
                  <CardDescription>
                    Variables: {(template as any).input_variables.join(', ')}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <h4 className="font-semibold mb-2">Input Variables:</h4>
                      <div className="flex flex-wrap gap-2">
                        {(template as any).input_variables.map((variable: string) => (
                          <Badge key={variable} variant="secondary">
                            {variable}
                          </Badge>
                        ))}
                      </div>
                    </div>
                    <div>
                      <h4 className="font-semibold mb-2">Prompt Template:</h4>
                      <div className="bg-muted p-4 rounded-lg text-sm relative">
                        <Button
                          variant="ghost"
                          size="sm"
                          className="absolute top-2 right-2"
                          onClick={() => copyToClipboard((template as any).prompt)}
                        >
                          <Copy className="w-4 h-4" />
                        </Button>
                        <p className="pr-10">{(template as any).prompt}</p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>

        <TabsContent value="packages" className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {Object.entries(aiAgencyData.ai_agency_prompt.deliverable_packages).map(([packageKey, packageData]) => (
              <Card 
                key={packageKey} 
                className={`cursor-pointer transition-all ${
                  selectedPackage === packageKey ? 'ring-2 ring-blue-500' : ''
                }`}
                onClick={() => setSelectedPackage(packageKey)}
              >
                <CardHeader>
                  <CardTitle>{(packageData as any).name}</CardTitle>
                  <CardDescription>
                    {(packageData as any).ideal_for}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <Badge variant="outline">{(packageData as any).timeline}</Badge>
                    </div>
                    <div>
                      <h4 className="font-semibold mb-2">Includes:</h4>
                      <ul className="space-y-1">
                        {(packageData as any).includes.map((item: string, index: number) => (
                          <li key={index} className="text-sm text-muted-foreground flex items-start">
                            <span className="w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 mr-2 flex-shrink-0"></span>
                            {item}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>

        <TabsContent value="workflow" className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {Object.entries(aiAgencyData.ai_agency_prompt.implementation_workflow).map(([phaseKey, phase]) => (
              <Card key={phaseKey}>
                <CardHeader>
                  <CardTitle className="capitalize text-lg">{phaseKey.replace('_', ' ')}</CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {(phase as string[]).map((step, index) => (
                      <li key={index} className="text-sm flex items-start">
                        <span className="w-6 h-6 bg-blue-100 text-blue-600 rounded-full text-xs flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">
                          {index + 1}
                        </span>
                        {step}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default AIAgencyPrompt;