import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Store, ExternalLink, Info, CheckCircle2 } from "lucide-react";
import { useTranslation } from "react-i18next";

interface ShopRenterConnectProps {
  onClose?: () => void;
}

export function ShopRenterConnect({ onClose }: ShopRenterConnectProps) {
  const { t } = useTranslation();

  return (
    <Card className="bg-slate-800 border-slate-700 max-w-2xl mx-auto shadow-none border-0">
      <CardHeader>
        <div className="flex items-center gap-3">
          <Store className="w-8 h-8 text-cyan-500" />
          <div>
            <CardTitle className="text-white text-2xl">{t('integrations.shoprenterConnect.title')}</CardTitle>
            <CardDescription className="text-slate-400">
              {t('integrations.shoprenterConnect.description')}
            </CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Information about connecting via ShopRenter Admin */}
        <div className="bg-cyan-500/10 border border-cyan-500/30 rounded-lg p-4 space-y-3">
          <div className="flex items-start gap-3">
            <Info className="w-5 h-5 text-cyan-500 mt-0.5 flex-shrink-0" />
            <div className="space-y-2">
              <h4 className="text-white font-medium">{t('integrations.shoprenterConnect.installInfo')}</h4>
              <p className="text-sm text-slate-300">
                {t('integrations.shoprenterConnect.installDescription')}
              </p>
            </div>
          </div>
        </div>

        {/* How to Connect Steps */}
        <div className="bg-slate-700/50 rounded-lg p-4 space-y-3">
          <h4 className="text-white font-medium flex items-center gap-2">
            <ExternalLink className="w-4 h-4 text-cyan-500" />
            {t('integrations.shoprenterConnect.howToConnect')}
          </h4>
          <ul className="space-y-2 text-sm text-slate-300">
            <li className="flex items-start gap-2">
              <span className="text-cyan-500 mt-0.5">1.</span>
              <span>{t('integrations.shoprenterConnect.step1')}</span>
            </li>
            <li className="flex items-start gap-2">
              <span className="text-cyan-500 mt-0.5">2.</span>
              <span>{t('integrations.shoprenterConnect.step2')}</span>
            </li>
            <li className="flex items-start gap-2">
              <span className="text-cyan-500 mt-0.5">3.</span>
              <span>{t('integrations.shoprenterConnect.step3')}</span>
            </li>
            <li className="flex items-start gap-2">
              <span className="text-cyan-500 mt-0.5">4.</span>
              <span>{t('integrations.shoprenterConnect.step4')}</span>
            </li>
            <li className="flex items-start gap-2">
              <span className="text-cyan-500 mt-0.5">5.</span>
              <span>{t('integrations.shoprenterConnect.step5')}</span>
            </li>
          </ul>
        </div>

        {/* Required Permissions */}
        <div className="bg-slate-700/50 rounded-lg p-4 space-y-3">
          <h4 className="text-white font-medium">{t('integrations.shoprenterConnect.permissionsTitle')}</h4>
          <div className="grid grid-cols-2 gap-2 text-sm text-slate-300">
            <div className="flex items-center gap-2">
              <CheckCircle2 className="w-4 h-4 text-green-500" />
              <span>{t('integrations.shoprenterConnect.readProducts')}</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle2 className="w-4 h-4 text-green-500" />
              <span>{t('integrations.shoprenterConnect.writeProducts')}</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle2 className="w-4 h-4 text-green-500" />
              <span>{t('integrations.shoprenterConnect.readOrders')}</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle2 className="w-4 h-4 text-green-500" />
              <span>{t('integrations.shoprenterConnect.writeOrders')}</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle2 className="w-4 h-4 text-green-500" />
              <span>{t('integrations.shoprenterConnect.readCustomers')}</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle2 className="w-4 h-4 text-green-500" />
              <span>{t('integrations.shoprenterConnect.writeCustomers')}</span>
            </div>
          </div>
          <p className="text-xs text-slate-400">
            {t('integrations.shoprenterConnect.permissionsNote')}
          </p>
        </div>

        {/* App Store Link Placeholder - to be updated with actual link */}
        {/* TODO: Add link to ShopRenter App Store when available */}
        {/* <Button
          className="w-full bg-cyan-500 hover:bg-cyan-600 text-white"
          onClick={() => window.open('https://app-store-link', '_blank')}
        >
          <ExternalLink className="w-4 h-4 mr-2" />
          Go to ShopRenter App Store
        </Button> */}

        {/* Close Button */}
        {onClose && (
          <Button
            variant="outline"
            onClick={onClose}
            className="w-full border-slate-600 text-slate-300 hover:bg-slate-700"
          >
            {t('integrations.shoprenterConnect.close')}
          </Button>
        )}
      </CardContent>
    </Card>
  );
}
