import React from "react";
import Card from "../ui/Card";
import Button from "../ui/Button";
import Divider from "../ui/Divider";
import { LuCopy } from "react-icons/lu";
import FtpInfoRow from "./FtpInfoRow";
import FtpPasswordCard from "./FtpPasswordCard";

export default function FtpAccountCard({
  account,
  connectionInfo,

  showPassword,
  onToggleShowPassword,

  resettingPass,
  onResetPassword,

  onCopy,

  onWhyInactive,
}) {
  const active = !!account?.is_active;

  return (
    <Card className="space-y-4" padding="lg">
      <div className="flex items-center justify-between gap-3">
        <div>
          <h2 className="font-semibold text-black dark:text-white">اطلاعات اکانت SFTP</h2>
          <p className="text-xs opacity-70 text-black/70 dark:text-white/70">
            ایجاد: {account?.created_at ? new Date(account.created_at).toLocaleString() : "-"}
            {" • "}
            بروزرسانی: {account?.updated_at ? new Date(account.updated_at).toLocaleString() : "-"}
          </p>
        </div>

        <span
          className={`text-xs px-3 py-1 shadow rounded-full border ${
            active
              ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-200"
              : "border-yellow-500/30 bg-yellow-500/10 text-yellow-800 dark:text-yellow-200"
          }`}
        >
          {active ? "Active" : "Inactive"}
        </span>
      </div>

      <div className="grid md:grid-cols-2 gap-3 text-sm">
        <FtpInfoRow label="Username" value={connectionInfo.username} onCopy={(v) => onCopy(v, "Username")} />
        <FtpInfoRow label="Home Dir" value={connectionInfo.homeDir} onCopy={(v) => onCopy(v, "Home Dir")} />
        <FtpInfoRow label="Server Name" value={connectionInfo.serverName} />
        <FtpInfoRow label="Server URL" value={connectionInfo.serverUrl} onCopy={(v) => onCopy(v, "Server URL")} />
      </div>

      <Divider />

      <div>
        <h3 className="font-medium text-black dark:text-white">Connection (SFTP)</h3>
        <p className="text-sm mb-3 opacity-70 text-black/70 dark:text-white/70">فایل های بارگذاری شده از طریق FTP ممکن هست بعد از مدتی در پنل مشاهده شوند ، درصورت مشاهده نشدن فایل ها از دکمه همگام سازی استفاده کنید .</p>
        <div className="grid md:grid-cols-2 gap-3 text-sm">
          <FtpInfoRow label="Host" value={connectionInfo.host || "-"} onCopy={(v) => onCopy(v, "Host")} />
          <FtpInfoRow label="Port" value={connectionInfo.port || "2022"} onCopy={(v) => onCopy(v, "Port")} />
          <FtpInfoRow label="Username" value={connectionInfo.username} onCopy={(v) => onCopy(v, "Username")} />

          <FtpPasswordCard
            hasPassword={!!connectionInfo.password}
            showPassword={showPassword}
            password={connectionInfo.password}
            resetting={resettingPass}
            onToggleShow={onToggleShowPassword}
            onRequestReset={onResetPassword}
            onCopy={() => onCopy(connectionInfo.password, "Password")}
          />
        </div>

        <div className="mt-3 p-3 shadow rounded-xl bg-[#f2f2f2] dark:bg-[#001F3F] border border-white/10 text-xs leading-6 text-black/80 dark:text-white/80">
          <div className="opacity-80 mb-1">نمونه تنظیم در FileZilla / WinSCP (SFTP):</div>
          <div>Protocol: SFTP</div>
          <div>Host: {connectionInfo.host || "-"}</div>
          <div>Port: {connectionInfo.port || "2022"}</div>
          <div>User: {connectionInfo.username}</div>
          <div>
            Password:{" "}
            {connectionInfo.password ? "(در بالا قابل مشاهده/کپی است)" : "(دریافت/ریست پسورد را بزن)"}
          </div>
        </div>

        <div className="mt-3 flex flex-wrap gap-2">
          <Button
            type="button"
            variant="outline"
            size="lg"
            onClick={() => {
              const txt = `Protocol: SFTP\nHost: ${connectionInfo.host || "-"}\nPort: ${
                connectionInfo.port || "2022"
              }\nUser: ${connectionInfo.username}\nPassword: ${
                connectionInfo.password ? connectionInfo.password : "(request reset)"
              }`;
              onCopy(txt, "تنظیمات SFTP");
            }}
            leftIcon={<LuCopy className="w-4 h-4 text-[#43BEFF] dark:text-white" />}
          >
            کپی تنظیمات SFTP
          </Button>

          {!active ? (
            <Button
              type="button"
              variant="soft"
              size="lg"
              onClick={onWhyInactive}
              className="!bg-yellow-500/10 !border !border-yellow-500/20 hover:!bg-yellow-500/20 !text-yellow-800 dark:!text-yellow-200"
            >
              چرا Inactive؟
            </Button>
          ) : null}
        </div>
      </div>
    </Card>
  );
}
